Angular checks the filter for 'contains', not 'equals'

Question

I am trying to map the rules to fields using the filter "filter" in Angular, as shown here: http://plnkr.co/edit/dQiv5lRzhQNjXZ6pVdWO?p=preview

I use a filter as shown below:

<div ng-repeat="f in fields">
      <h4>{{f.id}}</h4>
      <li ng-repeat = "rule in rules | filter:{field: {id: f.id} }">
        {{rule.name}}
      </li>
    </div>

This works great with single digit identifiers, but with two digits, as shown below:

$scope.fields = [{id: 1}, {id: 2}, {id: 3}];
$scope.rules = [{name: "A", field: {id: 12, age: 3}}, {name: "B", field: {id: 2, age: 1}}];

The rule with id 12 maps to fields with identifiers 1 and 2, when it should match only fields of identifier 12. Is there a way to do this using the default filter, or should I create a custom filter?

Answer 1

You can create your own filter:

.filter('byId',function(){
  return function(items, id){
    var res = [];
    for(var i=0;i<items.length;i++){
      if(items[i].field.id===id){
        res.push(items[i]);
      }  
    }
    return res;
  };
});

Html:

<li ng-repeat = "rule in rules | byId:f.id">
  {{rule.name}}
</li>

http://plnkr.co/edit/d3jmMWOwsHlMEya2Kjei?p=preview

Answer 2

, , Angular JS-

:

<div ng-repeat="f in fields">
      <h4>{{f.id}}</h4>
      <li ng-repeat = "rule in rules | filter:{field: {id: f.id} }:true">
        {{rule.name}}
      </li>
    </div>

Answer 3

Angular supports Equals compliance. instead of the comparator function, just pass "true". By default, it is false.

In HTML template binding

{{ filter_expression | filter : expression : true }}

In javascript

$filter('filter')(array, expression, true)

Refer: Angular Js Documentation