Filter mehrere Kontrollkästchen eckig

Question

Ich versuche, meine Ergebnisse auf mehrere Kontrollkästchen zu filtern.

Hier ist meine JSFIDDLE

Wie schreibe ich dynamische ng-model für die checkboxes für den Filter zu übernehmen reflektieren?

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>

Answer 1

können Sie benutzerdefinierte Filter verwenden, um Ihr Ziel zu erreichen:

individuelle 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> 

Für weitere Details siehe PLUNKER DEMO