2017-01-24 10 views
0

複数のチェックボックスで結果をフィルタリングしようとしています。ここで複数のチェックボックスをフィルタで囲む

は私が取る反映するフィルタのcheckboxesためng-modelダイナミック書くにはどうすればよい私のJSFIDDLE

のですか?カスタム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> 

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>

+0

私はあなたがカスタムフィルタAFAIKを書くことなくこれを行うことはできないと思う。 1つの言語しか選択できない場合は、組み込みのフィルタを使用することができました。 – tanmay

+0

お手伝いしますが、質問を明確にしてください。選択した値を含む配列/オブジェクトにチェックボックスをバインドすることは問題です(機能していないようです)。または、値の選択方法に依存しないフィルタリングステップのみです。両方の場合、2つの短い質問を別々に作成することができます。 1つだけの場合は、無関係な部分を除外し、質問を短くしてください。 – lex82

+0

あなたのフィドルは角度1.0.3を使用します。これは必須条件ですか? – lex82

答えて

2

あなたはあなたの目標を達成するためにカスタムフィルタを使用することができます詳細については、PLUNKER DEMO

+0

お時間をいただきありがとうございます。乾杯 – Loura

関連する問題