AngularJs filter with "or" condition?

Question

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

Answer 1

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

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">

Useful references:

• Passing arguments to angularjs filters
• Filters

Answer 2

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

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

Note that this is case sensitive (as string comparsion 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 complex, or your source data is big, filtering in controller can help readability and performance too.

Answer 3

I think you should use custom filter

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

ng-repeat="item in items | myFilter"