AngularJs 条件为 "or" 的过滤器?

AngularJs filter with "or" condition?

代码可在此处获得:https://plnkr.co/edit/gbbsEnXxVpLsxvtKsDxw?p=preview。过滤器 filter: { a : 'x' } 有效,只显示一行。

问题:

  1. 似乎 filter: { a : 'xxx' } 匹配 a 中的任何文本,只要该文本包含字符串 xxx。如果我想做精确匹配怎么办?
  2. 如何实现:显示所有行 if a = 'xxx' or b = 3 not not use c?
  3. 也许最好在 `model.dashbardRows?
  4. 上使用 javascript 代码

dashboard.component.js

(function () {
    'use strict';
    angular.module('testModule', []) 
    .component('dashboard', {
      templateUrl: 'dashboard.component.html',
      controllerAs: 'model',
      controller: [controller] 
    });

    function controller() {
      var model = this;
      model.dashboardRows = [
        {a:'xxx', b:1, c:'ss'}, 
        {a:'yyy', b:2, c:'tt'}, 
        {a:'zzz', b:3, c:'uu'}];
    }
})();

dashboard.component.html

<div>
  Test
  <table>
    <tr ng-repeat="i in model.dashboardRows | filter: { a : 'x' }">
      <td>{{i.a}}</td>
      <td>{{i.b}}</td>
    </tr>
  </table>
</div>

看看 filter filter 文档,你可以传入一个可选的 comparator 参数。

true: A shorthand for function(actual, expected) { return angular.equals(actual, expected)}. This is essentially strict comparison of expected and actual.

注意这是区分大小写的(因为字符串比较在 JS 中区分大小写)。

页面底部也有一个示例,演示过滤全部或仅过滤一个 属性。如果您的过滤很复杂,或者您的源数据很大,在控制器中进行过滤也有助于提高可读性和性能。

我认为你应该使用自定义过滤器

module.filter('myFilter', function(){
   return function(input){
      return input.filter(yourFilterFn);
   };
});

ng-repeat="item in items | myFilter"

正如@Valery 所建议的那样,使用自定义过滤器是解决此问题的最佳方法。

Here is fork using custom filter(multiple conditions)

dashboard.component.js

.filter("optionalFilter",function(){
  //console.log("filter loads");
  return function(items, firstArgument,secondArgument){
    //console.log("item is ",items); // it is value upon which you have to filter
    //console.log("firstArgument is ",firstArgument);
    //console.log("secondArgument ",secondArgument);
    var filtered = [];
    angular.forEach(items, function(value, key) {
      //console.log("val ::",value);
      if(value.a == firstArgument || value.b == secondArgument){
       // console.log("val ::",value.a);
        this.push(value);
      }
    }, filtered);
    //console.log("val ::",filtered);
    return filtered;
  }

dashboard.component.html

   <tr ng-repeat="i in model.dashboardRows | optionalFilter:'aaa':2">

有用的参考资料:

  • Passing arguments to angularjs filters
  • Filters