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

我有一个与用户和兴趣的对象数组。我想filter基于兴趣的清单。用户可以有多个兴趣点，当选定兴趣点复选框时，该列表应该根据这些兴趣点过滤出来。我在ng-repeat上使用了一个基本的过滤器，但它不起作用。角度过滤器与数组中的项目列表

如果我选择“体育”，那么应显示“约翰”和“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); 
        } 
       }); 
      });

来源

2016-09-12 Sateesh Kumar Alli

看看http://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs/21169596#21169596 – Manish

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

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

来源

2016-09-12 10:43:43

谢谢@Artyom Pranovich ..如果我想要显示数据，而不勾选复选框，默认情况下，并根据选择隐藏项目。 –

@SateeshKumarAlli，我是对的，你想实现这样的https://plnkr.co/edit/5OUyv6XT3vTdan7Amqkg?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; 
}

来源

2016-09-12 09:59:54 Andurit

修改你的HTML有点NG-重复

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

并添加此功能in 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

这将工作！谢谢

来源

2016-09-12 10:20:00 KrishCdbry

谢谢@KrishCdbry。此示例过滤兴趣，但我想根据兴趣过滤用户。 –

完成！我已经编辑了答案，请看看它。它会工作 – KrishCdbry

精湛的人..现在工作。谢谢。 –

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

回答

相关问题