按 HTML 中的条件进行角度自定义过滤不起作用

Question

我的角度很新，所以我的问题可能看起来简单或愚蠢，但我没有找到任何解决方案。 我的控制器中有一个集合（例如，整数集合），我想过滤它并获取条件为真的项目。

一开始我试过这个：

<div>{{myCollection.find(item => item === 2)}}</div>

它没有工作。 然后我找到了另一种方法（我不喜欢这种方法，因为我总是只有一个元素要显示，而且不需要重复）：

<div ng-repeat="item in list | filter:{item === 2}">
    <div>{{item}}</div>
</div>

而且它也不起作用。 这是我努力的 JSBin：http://jsbin.com/govovocace/1/edit?html,js,output

我的问题有什么可能的解决方案吗？在控制器中计算必填字段并将其传递给视图不适合我（不幸的是）。

Answer 1

你有语法错误。您不应该在过滤器中提及任何object，因为您正在直接过滤您正在循环的实际对象。最后一个选项true 是因为我们要执行精确检查。

HTML

<div ng-repeat="item in list | filter: 2: true">
    <div>{{item}}</div>
</div>

Demo Plunkr

Answer 2

您可以像这样在控制器中定义过滤器功能：

$scope.filterFn = function(val){
    return val === 2;
};

然后像这样在你的模板中使用它：

<div ng-repeat="item in list | filter:filterFn">
    <div>{{item}}</div>
</div>

你说，这相当于只是过滤数组开始，所以我不确定这是否满足您的需求。如果您有特定的用例，这不适合在 cmets 中告诉我。

Answer 3

我会做这样的事情

.controller('SomeController',function($scope){

 // get the list from somewhere
  $scope.list  = [] // some array for instance

  $scope.dataList = list.filter(function(i){
     return i.someVal==list.someVal; // condition that satisfy your req
  });

});

现在在视图中使用它

<div ng-repeat=" item in dataList"> 
   {{item}}
</div>

如果你的条件只返回一个结果，那么你可以这样做

$scope.dataList = list.filter(function(i){
         return i.someVal==list.someVal; // condition that satisfy your req
      })[0];