具有数组中项目列表的角度过滤器

Question

我有一组具有用户和兴趣的对象。我想filter 基于兴趣的列表。 An user can have multiple interests and when selected interests check boxes the list should filter out based on those interests.我在 ng-repeat 上使用了基本过滤器，但它不起作用。

如果我选择“体育”，则应该显示“约翰”和“罗莎琳”。 如果我选择“电影”和“阅读”，那么应该显示所有 3 个用户。 下面是我的代码。

Plunker：https://plnkr.co/edit/A0ojO3MH8rDhFJVXlEAs?p=preview

查看：

<div ng-app="myApp" ng-controller="myController" style="padding:20px">
<input type="checkbox" ng-model="selection.reading" ng-true-value="'reading'" ng-false-value="''">reading
<input type="checkbox" ng-model="selection.sports" ng-true-value="'sports'" ng-false-value="''">sports
<input type="checkbox" ng-model="selection.movies" ng-true-value="'movies'" ng-false-value="''">movies
<br><br>
Selected Values: {{selectedValues}}
<hr>
    <div ng-repeat="d in data | filter: selectedValues">
      <h4>
      Name: {{d.user}}
      </h4>

        <h4>
      Interests: {{d.interests}}
      </h4>

      <hr>

</div>

控制器：

$scope.selection = {};
    $scope.data = [
        {
            user: "John",
            interests: ["reading","sports","movies"]
        },
           {
            user: "David",
            interests: ["movies","reading"]
        },
        {
            user: "Rosaline",
            interests: ["sports","movies"]
        }
    ];
    $scope.$watchCollection('selection', function () {
                $scope.selectedValues = [];
                angular.forEach($scope.selection, function (value, key) {
                    if (value) {
                        $scope.selectedValues.push(value);
                    }
                });
            });

Answer 1

Here is 是此类示例中过滤对象的众多方法之一。

我建议在这种情况下摆脱使用$watch 并通过简单的ngChange 指令实现复选框功能。下面的例子。

<input type="checkbox" ng-model="selection.reading" ng-change="selectInterest('reading')">reading
<input type="checkbox" ng-model="selection.sports" ng-change="selectInterest('sports')">sports
<input type="checkbox" ng-model="selection.movies" ng-change="selectInterest('movies')">movies

$scope.selectInterest = function(interest){
  $scope.selection[interest] = !!$scope.selection[interest];
};

对于过滤数据，我建议使用$filter 或（只是为了简化示例）像控制器函数一样实现此过滤器。

$scope.filterUsers = function(user){
  return Object.keys($scope.selection).some(function (item) {
    return user.interests.indexOf(item) >= 0 && $scope.selection[item];
  });
};

您可以在上面的链接中查看并使用我的示例的整个代码。

Answer 2

在 ng-repeat 中稍微修改你的 html

<div ng-repeat="d in data" ng-hide="selectedValues.length > 0 && !filteredData(d.interests)">
  <h4>
    Name: {{d.user}}
  </h4>

  <h4>
     Interests: {{d.interests}}
 </h4>

  <hr>

</div>

并在script.js中添加这个函数

             $scope.filteredData = function (data) {
             var found = false;
                 for (var i = 0; i < $scope.selectedValues.length; i++) {
                    if (data.indexOf($scope.selectedValues[i]) !== -1) { found = true; break; }
                 }   
              return found;
         };

现场示例： https://plnkr.co/edit/y8tqNiIU6p3x8d9zcdzL?p=preview

这行得通！谢谢

Answer 3

您可以将过滤器保存在某个数组中，例如filterInterests 然后你的 HTML 可能看起来像：

<div ng-repeat="d in data">
  <div  ng-show="hasInterest(d.interests, filterInterests)">
  // Your code here
  </div>
</div>    

你的函数看起来像：

function hasInterest(data, interests){
  var result = false;
  // Iterate over interests from filter and check them all in provided data
  for(var=i, i<interests.length, i++){
   if(data.indexOf(i) != -1) result = true       
   else result = false;
  }
  return result;
}