篩選多個複選框角

我想在多個複選框上篩選我的結果。篩選多個複選框角

這裏是我的JSFIDDLE

我怎樣寫動態ng-model爲checkboxes用於過濾取反映？

function MainCtrl($scope) { 
 
    $scope.languages = [ 
 
     { name: 'persian', _id : 0 }, 
 
     { name: 'English', _id : 1 }, 
 
     { name: 'spanish', _id : 2 } 
 
     ]; 
 
    \t $scope.bu = [ 
 
     { name: 'A', _id : 1 }, 
 
     { name: 'B', _id : 2 }, 
 
     { name: 'C', _id : 3 }, 
 
     { name: 'D', _id : 4 }, 
 
     { name: 'E', _id : 5 } 
 
     ]; 
 
    
 
    $scope.array = [ 
 
    { 
 
    "id": 910, 
 
    "language": { 
 
     "_id": "333", 
 
     "name": "Persian", 
 
     "abbreviation": "PE" 
 
    }, 
 
    "business_unit": { 
 
     "_id": "2", 
 
     "name": "B" 
 
    } 
 
    }, 
 
    {  
 
    "id": 909, 
 
    "language": { 
 
     "_id": "456", 
 
     "name": "English", 
 
     "abbreviation": "EN" 
 
    }, 
 
    "business_unit": { 
 
     "_id": "3", 
 
     "name": "C" 
 
    } 
 
    }, 
 
    {  
 
    "id": 908, 
 
    "language": { 
 
     "_id": "456", 
 
     "name": "Spanish", 
 
     "abbreviation": "SP" 
 
    }, 
 
    "business_unit": { 
 
     "_id": "4", 
 
     "name": "D" 
 
    } 
 
    }, 
 
    {  
 
    "id": 911, 
 
    "language": { 
 
     "_id": "343", 
 
     "name": "German", 
 
     "abbreviation": "GE" 
 
    }, 
 
    "business_unit": { 
 
     "_id": "5", 
 
     "name": "E" 
 
    } 
 
    }, 
 
    {  
 
    "id": 912, 
 
    "language": { 
 
     "_id": "696", 
 
     "name": "Russian", 
 
     "abbreviation": "RU" 
 
    }, 
 
    "business_unit": { 
 
     "_id": "1", 
 
     "name": "A" 
 
    } 
 
    }] 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <div ng-controller="MainCtrl"> 
 
    
 
    
 
    
 
    
 
    <li ng-repeat="o in languages" ng-model="lang.language.name"> 
 
     <input type="checkbox"> 
 
     {{o.name}}, 
 
    `</li> 
 
    
 
    <br><br><br> 
 
    <li ng-repeat="o in bu"> 
 
     <input type="checkbox" ng-model="bu.business_unit.name"> 
 
     {{o.name}}, 
 
    `</li> 
 
    
 
    <br><br><br> 
 
    <div ng-repeat="arr in array filter : lang | filter : bu"> 
 
     {{arr.language.name}} "and" {{arr.business_unit.name}} 
 
    </div> 
 
    
 
<div>

來源

2017-01-24 Loura

我不認爲你可以這樣做，而無需編寫自定義過濾器AFAIK。如果您只能選擇一種語言，則可以使用內置過濾器。 – tanmay

我很樂意幫助你，但請澄清你的問題。問題是將複選框綁定到包含選定值的數組/對象（似乎不起作用），還是僅僅是過濾步驟，而不依賴於如何選擇值。如果兩者都有，則可以創建兩個單獨的較短問題。如果只有一個，請忽略不相關部分並縮短您的問題。 – lex82

你的小提琴使用Angular 1.0.3。這是一個要求嗎？ – lex82

可以使用自定義過濾器來實現你的目標：

定製fileter：

filter('myFilter', function() { 
    return function(items, search) { 
    var filterItems = { 
     search: search, 
     result: [] 
    }; 

    if (!search.needFilter) { 
     return items; 
    } 

    angular.forEach(items, function(value, key) { 
     if (this.search.language[value.language.name] === true || this.search.business_unit[value.business_unit.name] === true) { 
     this.result.push(value); 
     } 
    }, filterItems); 
    return filterItems.result; 
    }; 
})

HTML：

<p>Search by Language:</p> 
    <li ng-repeat="o in languages"> 
    <input type="checkbox" ng-model="search.language[o.name]"> {{o.name}} 
    </li> 

    <p>Search by Unit:</p> 
    <li ng-repeat="o in bu"> 
    <input type="checkbox" ng-model="search.business_unit[o.name]"> {{o.name}} 
    </li> 

    <p><b>Result:</b></p> 
    <div ng-repeat="arr in array | myFilter : search:false "> 
    {{arr.language.name}} "and" {{arr.business_unit.name}} 
    </div>

欲瞭解更多詳情，請參閱PLUNKER DEMO

來源

2017-01-24 08:11:03

謝謝你的時間。乾杯 – Loura

篩選多個複選框角

回答

相關問題