Angular 在 HTML 中按条件自定义过滤不起作用

Question

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

起初我试过这个：

<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

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

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

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

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

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

Answer 2

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

HTML

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

Demo Plunkr

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>

如果您的条件 return 只有一个结果，那么您可以

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

Angular 在 HTML 中按条件自定义过滤不起作用

Angular custom filtering by condition in HTML doesn't work

javascript

angularjs

ng-repeat

angularjs-ng-repeat

angularjs-filter