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

标签 javascript angularjs

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

问题:

  1. 似乎 filter: { a : 'xxx' } 会匹配 a 中的任何文本,只要该文本包含字符串 xxx 即可。如果我想要精确匹配怎么办?
  2. 如何实现:如果a = 'xxx'或b = 3不使用c则显示所有行?
  3. 也许在 `model.dashbardRows 上使用 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>

最佳答案

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

Here is fork using custom filter(multiple conditions)

仪表板.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;
  }

仪表板.component.html

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

有用的引用:

关于javascript - AngularJs 过滤器的条件为 "or"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39554350/

相关文章:

javascript - 只显示一个类的第一次出现

javascript - 如果数据库中不存在,MongoDB 最好的方法是只发布数据?

javascript - JavaScript 中插值和连接之间的区别?

javascript - 使用 Moment Timezone 将 UTC 转换为太平洋时间 (javascript)

javascript - 我如何从 mongodb 数据库获取所有文档?

javascript - 如何设置定时器本地存储

javascript - 如何使用 slid.bs.carousel 在幻灯片更改时返回值

javascript - 以编程方式提交 Angular 表单,但仍然收到 HTML5 验证错误

javascript - 有没有可能的方法来获取滚动位置并且不会出现元素未定义的错误?

javascript - 如何使用 Angular 在单击按钮时激活 CSS 动画?