Angular filter is designed to search for elements that contain a specific value, rather than only those that are an exact match

Question

Angular filter is designed to search for elements that contain a specific value, rather than only those that are an exact match

I am currently trying to relate rules to fields using the 'filter' filter in Angular. You can see an example of this implementation here: http://plnkr.co/edit/dQiv5lRzhQNjXZ6pVdWO?p=preview

The code I am using for this purpose is as follows:

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

Everything works perfectly with single digit ids, but when dealing with double-digit numbers, such as:

$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 issue arises where the rule with id 12 is matched to both fields with ids 1 and 2, instead of just the field with id 12. Is there a way to resolve this using the default filter, or would it be necessary to create a custom filter?

javascript angularjs

Answer 1

Answer №1

I encountered a similar issue and stumbled upon an enlightening article that provided the perfect solution Angular JS filter equals

In your specific scenario, you need to implement the following code snippet:

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

I encountered a similar issue and stumbled upon an enlightening article that provided the perfect solution Angular JS filter equals

In your specific scenario, you need to implement the following code snippet:

<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

Answer №2

If you want to customize your filter, you can create one like this:

.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;
  };
});

Here is how you can use it in your HTML code:

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

You can find a live example at this link.

Answer 4

If you want to customize your filter, you can create one like this:

.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;
  };
});

Here is how you can use it in your HTML code:

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

You can find a live example at this link.

Answer 5

Answer №3

One interesting feature of Angular is its native support for Equals match. Instead of using a comparator function, you can simply pass "true". The default value is set to false.

When it comes to HTML Template Binding:

{{ filter_expression | filter : expression : true }}

And in JavaScript:

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

For more information, check out the Angular Js Documentation

Answer 6

One interesting feature of Angular is its native support for Equals match. Instead of using a comparator function, you can simply pass "true". The default value is set to false.

When it comes to HTML Template Binding:

{{ filter_expression | filter : expression : true }}

And in JavaScript:

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

For more information, check out the Angular Js Documentation

Angular filter is designed to search for elements that contain a specific value, rather than only those that are an exact match

Answer №1

Answer №2

Answer №3

Similar questions

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

Having trouble with your mobile dropdown menu not responding to clicks?

Specify the controller to be used dynamically in an Angular directive

AngularJS textbox validation for numbers and required in repeating mode ensures that the user input is a

Group a set of x elements together within a div, and then group a distinct number of elements together after every x-grouping

Should WordPress files be kept separate (php, css, and js) or combined into a single file?

Utilize Function to Gain Access to React Context

React and D3 Force Layout: uncharted territories for new links' positions

JavaScript debugging causing system freeze

Is using async/await with setState() in React.js the best approach for handling asynchronous operations?

Tips for formatting a lengthy SQL query in a Node.js application

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

Encountering build:web failure within npm script due to TypeScript

Exploring the power of Partial Views in ASP.NET MVC 4 with Ajax.ActionLink

Solving the Cross-Origin Resource Sharing problem in AngularJS

AngularJS encountering unresponsive resources

What could be causing my default prop to not be transmitted to the child component in vuejs2?

Correlating Mailgun Webhook event with Mailing list email

Ways to enable a user to edit a calculated property in VueJS?

The model fails to bind when JSON is sent to the MVC controller