Filter Angular.js by precise values (exact match)

Question

Filter Angular.js by precise values (exact match)

Check out this HTML code snippet:

  <ul ng-repeat="friend in friends | filter: { age: '2' } | orderBy: 'name' ">
   <li>{{friend.name}}</li>
  </ul>

Here is the $scope variable being used:

 $scope.friends = [
{ name: "Peter",   age: 2 },
{ name: "Pablo",   age: 55 },
{ name: "Linda",   age: 20 },
{ name: "Marta",   age: 37 },
{ name: "Othello", age: 20 },
{ name: "Markus",  age: 32 }
];

The output generated from the code is as follows:

Linda
Markus
Othello
Peter

Have questions about how the comparison works in the ng filter and how to specifically get friends with an age of 2? Look no further:

Peter

javascript angularjs

Answer 1

Answer №1

If you are using Angular 1.2, simply include the strict parameter (true) in the filter to ensure an exact match. Also, make sure to pass the number 2 as a number and not a string: filter:{age:2}:true

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
   $scope.friends = [
    {name: "Peter",   age: 2 },
    {name: "Pablo",   age: 55},
    {name: "Linda",   age: 20},
    {name: "Marta",   age: 37},
    {name: "Othello", age: 20},
    {name: "Markus",  age: 32}
  ]; 
})
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <ul ng-repeat="friend in friends | filter:{age:2}:true | orderBy: 'name' ">
   <li>{{friend.name}}</li>
  </ul>
</body>

Answer 2

If you are using Angular 1.2, simply include the strict parameter (true) in the filter to ensure an exact match. Also, make sure to pass the number 2 as a number and not a string: filter:{age:2}:true

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
   $scope.friends = [
    {name: "Peter",   age: 2 },
    {name: "Pablo",   age: 55},
    {name: "Linda",   age: 20},
    {name: "Marta",   age: 37},
    {name: "Othello", age: 20},
    {name: "Markus",  age: 32}
  ]; 
})
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <ul ng-repeat="friend in friends | filter:{age:2}:true | orderBy: 'name' ">
   <li>{{friend.name}}</li>
  </ul>
</body>

Answer 3

Answer №2

Implemented a directive that successfully converted the model value to a number by adding the strict parameter (true) in my code.

myApp.directive('convertToNumber', [function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
      controller.$parsers.push(function(value) {
        return parseInt(value, 10);
      });

      controller.$formatters.push(function(value) {
        if (value != null) {
          return value.toString();
        }
      });      
    }
  };
}]);

Answer 4

Implemented a directive that successfully converted the model value to a number by adding the strict parameter (true) in my code.

myApp.directive('convertToNumber', [function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
      controller.$parsers.push(function(value) {
        return parseInt(value, 10);
      });

      controller.$formatters.push(function(value) {
        if (value != null) {
          return value.toString();
        }
      });      
    }
  };
}]);

Filter Angular.js by precise values (exact match)

Answer №1

Answer №2

Similar questions

The combination of Fabric.js, Darkroom.js, and devicePixelRatio offset creates a powerful tool

Setting a value in Ionic 3 HTML template

What is the purpose of using the grouping operator in this particular line of code?

The new button placed on a <div> was not initialized to trigger my greasemonkey functions

Is it possible to edit and update remote data using ng-grid?

How can you make text flash repeatedly on the screen?

Trigger a jQuery event when a particular element has finished loading

Hide button for the last input form to dynamically remove in jQuery

The global variable remains unchanged after the Ajax request is made

Guide on how to display an HTML file in Vue JS that is received from the server

using a variable in a Node.js SQL query

Implement the Show/Hide TinyMCE Functionality in your <textarea></textarea> Box

Creating HTML inputs dynamically using jQuery in an ASP.NET application

"By implementing an event listener, we ensure that the same action cannot be

Is it possible to remotely adjust JavaScript configurations on the client's side using JSON?

Error encountered during module build in Vue loader version 17.0.0 with Webpack version 5.74.0

Encounter an Internal Server Error while using Laravel 5.4

Break down a string into an array containing a specific number of characters each

The issue of memory leakage caused by jQuery Ajax requests

Looking for an alternative method to compare strings in node.js without causing a call stack crash with if-else statements