Searching for multiple values using ng-model in AngularJS is a powerful feature that allows

Question

Searching for multiple values using ng-model in AngularJS is a powerful feature that allows

I've looked everywhere for a solution to my problem but I haven't found an exact match. Can anyone lend a hand? Here's the ng-repeat filter list I'm working with:

<ul>   
  <li ng-repeat="f in filterOptions">
  <p>{{f.group}}</p>   
    <ul>
      <li ng-repeat="o in f.options">
        <input id="{{$parent.f.filtername}}{{$index}}" type="checkbox" ng-model="Filter.category[o.title]" ng-true-value="{{o.title}}" ng-false-value=""  />
      </li>
    </ul>
  </li>
</ul>

This is how my JSON looks:

[
  {
    "group": "Product Categories",
    "filtername" : "category",
    "options": [
        {
            "title": "Category A",
            "alt_titles": ["Category B, Category C"]
        },
        {
            "title": "Category 1",
            "alt_titles": ["Category 2, Category 3"]
        }
    ]
  }
]

Currently, I can successfully search for items that fall under o.titles. Now, I need some guidance on how to also search for items belonging to alt_titles.

For example: When I click on Category A, I want to display items from Category B and Category C as well. The same goes for Category 1, which should show items from Category 2 and 3.

I hope my explanation was clear. Any help would be greatly appreciated. Thank you!

Take a look at a working sample HERE

javascript angularjs angularjs-ng-model

Answer 1

Answer №1

If you're faced with a scenario like this, creating a custom filter is the solution. You can find detailed documentation on how to do this here: https://docs.angularjs.org/tutorial/step_09 For a practical example, check out my implementation here: http://plnkr.co/edit/lzyo5cTMd6FUzYw9JSq8

app.filter('MultiValueFilter',function(){
return function(list, queries){
  var result = [];
  var queries_regex = [];
  angular.forEach(queries, function(query){
    queries_regex.push(new RegExp('^' + escapeRegExp(query),'i'));
  });

  angular.forEach(list, function(item){
    for(var i = 0; i < queries_regex.length; ++i){
      if(queries_regex[i].test(item)){
        result.push(item);
        break;
      }
    }
  });
  return result;
  };
});

In essence, this filter function iterates through each item in the list, tests it against a set of regular expressions, and adds it to the result if it matches any of the expressions.

Answer 2

If you're faced with a scenario like this, creating a custom filter is the solution. You can find detailed documentation on how to do this here: https://docs.angularjs.org/tutorial/step_09 For a practical example, check out my implementation here: http://plnkr.co/edit/lzyo5cTMd6FUzYw9JSq8

app.filter('MultiValueFilter',function(){
return function(list, queries){
  var result = [];
  var queries_regex = [];
  angular.forEach(queries, function(query){
    queries_regex.push(new RegExp('^' + escapeRegExp(query),'i'));
  });

  angular.forEach(list, function(item){
    for(var i = 0; i < queries_regex.length; ++i){
      if(queries_regex[i].test(item)){
        result.push(item);
        break;
      }
    }
  });
  return result;
  };
});

In essence, this filter function iterates through each item in the list, tests it against a set of regular expressions, and adds it to the result if it matches any of the expressions.

Searching for multiple values using ng-model in AngularJS is a powerful feature that allows

Answer №1

Similar questions

Achieve a Smooth Transition: Utilizing Bootstrap 3 to Create an Alert Box that Fades In upon Click and Fades Out

`Is there a way to choose several radio buttons with varying names using just one label?`

Unable to retrieve data from the database within PHP code

When an image is loaded, use Jquery to automatically open a new tab, instead of

"Enhance your website with Ajax code that enables automatic refreshing of a PHP file, keeping its values up-to-date

Tips for hiding a div element until its visibility is toggled:- Set the display property of

JavaScript-powered server polling

What is the method for specifying a JSON object within a DOM element's `data` attribute?

Whenever I change the value of a textbox using plain JavaScript, the text becomes hidden from view

No response from jQuery's $.getJSON() function

Disabling form submission when pressing the enter key

Unable to reset the input value to an empty string

Firefox not responding to input select dropdown selection

Setting up node.js for angular - serving static files with connect.static and running unit tests

What is the best approach for testing functions in AngularJS using unit tests?

Tracking and managing user clicks on external links within a vue.js application

Is it possible to showcase content when double curly brackets are nested within another set of double curly brackets

I am attempting to utilize a ref in React to access an element within a MUI modal, but I am encountering issues as the reference to the

After using browserify, when attempting to call the function in the browser, an Uncaught ReferenceError occurs

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand