AngularJS - トグルボタン付きのバインドフィルタ

Question

私は真偽スキルの人のリストを持っており、各スキ​​ルに関連するボタンでデータをフィルタリングしたいと思います。

私はスキルをクリックしたときにトグルボタンを作成し、スキルが真であれば人々だけを示すフィルタを作成します。どちらも機能しています。

トグルボタンでフィルタをバインドするにはどうすればよいですか？ボタンがアクティブな場合、フィルターはアクティブです。そうでない場合、フィルタはそうではありません。クリックで

ボタン

<button id="word" ng-class="{'active-word': wordActive}" ng-click="wordButton()">Word</button> 

app.controller('skillsCtrl', function ($scope) { 
     $scope.wordActive = false; 
     $scope.wordButton = function() { 
     $scope.wordActive = !$scope.wordActive; 
} 

フィルター

app.filter('wordskills', function() { 
    return function (items) { 

    var filtered = []; 
    for (var i = 0; i < items.length; i++) { 
     var item = items[i]; 
     if (item.word == true) { 
     filtered.push(item); 
     } 
    } 
    return filtered; 

    }; 
}); 

ビュー

<div class="container" ng-repeat="person in group | wordskills"> 

Answer 1

、あなたは変数を切り替えることができますフィルタに渡します。この変数が真である場合は、フィルタリングのみを行います。

<button ng-click="word = !word" id="word" ng-class="{'active-word': wordActive}" ng-click="wordButton()">Word</button> 

<div class="container" ng-repeat="person in group | wordskills: word"> 

app.filter('wordskills', function() { 
    return function (items, word) { 
     return word ? items.filter(el => el.word) : items; 
    }; 
}); 
app.controller('skillsCtrl', function ($scope) { 
     $scope.word = false; 
}