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

Utilize react-router-dom for conditional rendering based on button clicks

Tips for showcasing req.validationError in a form

Handling Errors with Async-Await in JavaScript: Struggling to Retrieve Error Specifics from Error Objects

Storing a jquery ajax response for faster retrieval in javascript/browser

IE8 experiencing issues with jQuery live click event functionality

What is the best method for uploading a JSON file to a React web application and retrieving the file's link?

Execute karma tests from the command line in a Linux terminal

Enable users to handle the version of a dependency in an npm package

Unraveling AngularJS: Mastering the Art of Interpolating Interpol

Extracting data from web pages using JavaScript and PHP

Animating SVGs in Internet Explorer (IE)

How can I make TypeScript mimic the ability of JavaScript object wrappers to determine whether a primitive value has a particular "property"?

The Vue conditional event handling with the v-on directive and the prevent modifier

Trigger a JavaScript/jQuery event using code instead of user interaction

A runtime error occurred in ScriptResource.axd at line var f = ($telerik.isIE) ? document.createElement('<iframe name="' + this.get_id() + '">');

``If you're looking to retrieve, modify, and display information in your Vue application with the help of

The function causes an unexpected alteration in the coordinates of polygons on a leaflet map

SSL certificate not being presented by the Socket.io chat server

Sometimes the downloaded xlsx file may become corrupted

Develop a JSON object with a unique format by combining elements from two separate arrays using JavaScript