Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)

by

Here is the plunker

New plunker with cleaner code & where both the query and search list items are case insensitive

Main idea is create a filter function to achieve this purpose.

From official doc

function: A predicate function can be used to write arbitrary filters.
The function is called for each element of array. The final result is
an array of those elements that the predicate returned true for.

<input ng-model="query">

<tr ng-repeat="smartphone in smartphones | filter: search "> 


$scope.search = function(item) {
    if (!$scope.query || (item.brand.toLowerCase().indexOf($scope.query) != -1) || (item.model.toLowerCase().indexOf($scope.query.toLowerCase()) != -1) ){
        return true;
    }
    return false;
};

Update

Some people might have a concern on performance in real world, which is correct.

In real world, we probably would do this kinda filter from controller.

Here is the detail post showing how to do it.

in short, we add ng-change to input for monitoring new search change

and then trigger filter function.

More Related Contents:

  1. AngularJS: Service vs provider vs factory
  2. File Upload using AngularJS
  3. AngularJS Multiple ng-app within a page
  4. AngularJS: ng-model not binding to ng-checked for checkboxes
  5. Angularjs ng-model doesn’t work inside ng-if
  6. AngularJs event to call after content is loaded
  7. What is the difference between ng-app and data-ng-app?
  8. Error with $http.get in angularJS — Success not a Function [duplicate]
  9. Does my ng-model really need to have a dot to avoid child $scope problems?
  10. How to generate url encoded anchor links with AngularJS?
  11. Using Bootstrap for Angular and Material design for Angular together
  12. AngularJS error .success is not a function
  13. calling method of parent controller from a directive in AngularJS
  14. AngularJS – How can I do a redirect with a full page load?
  15. How to simulate a drag and drop action in protractor?
  16. How do I store a current user context in AngularJS?
  17. $apply already in progress error
  18. Math functions in AngularJS bindings
  19. Clear History and Reload Page on Login/Logout Using Ionic Framework
  20. How to return image from $http.get in AngularJS
  21. What is the Angular ui-router lifecycle? (for debugging silent errors)
  22. How do I create an AngularJS UI bootstrap popover with HTML content?
  23. How to getText on an input in protractor
  24. How do I handle right-click events in angular.js?
  25. How to use `replace` of directive definition?
  26. How to highlight a selected row in ngRepeat?
  27. How to implement an ng-change for a custom directive
  28. how to make synchronous http request in angular js
  29. how do I get ng-include directive to work with a Content Delivery Network?
  30. Inject module dynamically, only if required

Leave a Comment