Question

我有一系列具有用户和兴趣的对象。我想基于兴趣列出filter列表。用户可以具有多个兴趣，并且当选择的兴趣复选框时，列表应该基于这些兴趣过滤掉。我在ng-repeat上使用了一个基本的过滤器，但它没有用。

如果我选择“运动”，则应显示“John”和“Rosaline”。如果我选择“电影”和“阅读”，则应显示所有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;
}

角度过滤器，包含数组中的项列表

3 个答案: