HTML中按条件进行角度自定义筛选;不起作用

Angular custom filtering by condition in HTML doesn't work

本文关键字：自定义 筛选 不起作用 条件 HTML      更新时间：2023-09-26

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

起初我尝试了这个：

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

但没用。然后我找到了另一种方法（我不喜欢这种方法，因为我永远只有一个元素可以展示，而且不需要重新竞争）：

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

而且它也不起作用。以下是我的努力：http://jsbin.com/govovocace/1/edit?html，js，输出

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

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

HTML

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

Demo Plunkr

您可以在控制器中定义一个过滤函数，如下所示：

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

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

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

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

我会做这样的

.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];
相关文章：