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

Angular filter with list of items in an array

本文关键字：过滤器 列表 项目 数组      更新时间：2023-09-26

我有一个具有用户和兴趣的对象数组。我想以兴趣为基础对这份清单进行filter。一个用户可以有多个兴趣，当选中兴趣复选框时，列表应该根据这些兴趣进行筛选。我对ng重复使用了一个基本的过滤器，但它不起作用。

如果我选择"sports"，则应显示"John"answers"Rosaline"。如果我选择"电影"answers"阅读"，那么应该显示所有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);
                    }
                });
            });

这里是在此类示例中筛选对象的多种方法之一。

我建议在这种情况下取消使用$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];
  });
};

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

在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

这会奏效的！感谢

您可以将过滤器保存在某个数组中，例如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;
}
相关文章：