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

我有一个包含用户和兴趣的对象数组。我想根据兴趣过滤列表。用户可以有多个兴趣，选中兴趣复选框时，列表应根据这些兴趣进行筛选。我在ng repeat上使用了一个基本过滤器，但它不起作用

如果选择“运动”，则应显示“John”和“Rosaline”。 如果我选择“电影”和“阅读”，那么应该显示所有3个用户。 下面是我的代码

普朗克：

查看：

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

---

您可以将筛选器保留在某个数组中，例如

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

//你的代码在这里

您的函数将如下所示：

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

函数有兴趣（数据、兴趣）{
var结果=假；
//迭代过滤器中的兴趣，并在提供的数据中全部检查它们
对于（var=i，i在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>


名称：{{d.user}
利益：{d.利益}


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

$scope.filteredData=函数（数据）{
var=false；
对于（变量i=0；i<$scope.selectedValues.length；i++）{
if（data.indexOf（$scope.selectedValues[i]）！=-1{found=true；break；}
}   
发现退货；
};

实例：

这就行了！谢谢你，在这样的例子中，有很多方法可以过滤对象

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

您可以在上面的链接中查看并使用我的示例的全部代码。
请看一看谢谢@Artyom Pranovich..如果我希望在默认情况下显示数据，而不选中复选框，并根据选择隐藏项目，该怎么办。@SateeshKumarAlli，您希望这样实现吗？它首先显示所有数据加载页面，然后根据复选框选择筛选数据的时间。没错。谢谢。如果在未选中复选框时显示数据，那就太好了。@SateeshKumarAlli，这是您要求的帮助我的内容。非常感谢。@ArtyomPranovichThank you@KrishCdbry。这个示例筛选了兴趣，但我想基于兴趣的ter用户。是的，完成了！我已经编辑了答案，请看一看。它会工作的。您的代码工作正常，但没有提供所需的输出。假设我选择阅读和体育，它应该显示John和Rosaline，但它只显示一个人。我将使用@Artyom Pranovich的解决方案，尽管所有选定的兴趣应该在那里，但如果有任何一个，我会更新。这只是一个线路的变化。你现在可以访问plunker了