javascript - AngularJs filter with "or" condition? - Stack Overflow

admin管理员组

文章数量:1325674

The code is available here: . The filter filter: { a : 'x' } works and only one row is shown.

Question:

1. It seems filter: { a : 'xxx' } matches any text in a as long as the text contains the string xxx. What if I want to do exact matching?
2. How to implement: show all the rows if a = 'xxx' or b = 3 not not use c?
3. Maybe it's better to use javascript code on `model.dashbardRows?

dashboardponent.js

(function () {
    'use strict';
    angular.module('testModule', []) 
    ponent('dashboard', {
      templateUrl: 'dashboardponent.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'}];
    }
})();

dashboardponent.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>

The code is available here: https://plnkr.co/edit/gbbsEnXxVpLsxvtKsDxw?p=preview. The filter filter: { a : 'x' } works and only one row is shown.

Question:

1. It seems filter: { a : 'xxx' } matches any text in a as long as the text contains the string xxx. What if I want to do exact matching?
2. How to implement: show all the rows if a = 'xxx' or b = 3 not not use c?
3. Maybe it's better to use javascript code on `model.dashbardRows?

dashboard.ponent.js

(function () {
    'use strict';
    angular.module('testModule', []) 
    .ponent('dashboard', {
      templateUrl: 'dashboard.ponent.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.ponent.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>

• javascript
• angularjs

Share Improve this question Follow edited Sep 18, 2016 at 6:22 ca9163d9 asked Sep 18, 2016 at 5:13 ca9163d9ca9163d9 29.2k7373 gold badges247247 silver badges454454 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

As suggested by @Valery using custom Filter is the best solution around this.

Here is fork using custom filter(multiple conditions)

dashboard.ponent.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.ponent.html

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

Useful references:

• Passing arguments to angularjs filters
• Filters

Take a look at the filter filter docs, you can pass in an optional parator parameter.

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

Note that this is case sensitive (as string parsion is case sensitive in JS).

Also there is an example too at he bottom of the page that demonstrates filtering all or only a single property. If your filtering is plex, or your source data is big, filtering in controller can help readability and performance too.

I think you should use custom filter

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

ng-repeat="item in items | myFilter"

本文标签： javascriptAngularJs filter with quotorquot conditionStack Overflow