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; 
}