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