How to use Custom Filter in ng-options In Angular
In the below approach, we are using the Custom Filter in the ng-options directive for filtering by object property in AngularJS. Here, the users can input a county name in the text fields, and automatically the below drop-down menu dynamically filters and only shows the matching record to the user input. There is a custom filter in the ‘ng-options‘ directive to filter and display the relevant data. Here, the ng-options directive mainly populates and then filters the options in the ‘<select>‘ element dynamically.
Example: Below is an example that demonstrates filtering by object property in AngularJS using Custom Filter in the ng-options Directive.
HTML
<!DOCTYPE html> <html ng-app="myApp"> <head> <title> AngularJS Custom Filter in ng-options </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script> <style> body { font-family: Arial, sans-serif; text-align: center; } h1 { color: green; } h3 { color: blue; } .filter-container { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 20px; } .filter-input { margin-bottom: 20px; } .filter-input label { font-weight: bold; margin-right: 10px; } input[type="text"] { padding: 5px; width: 200px; } select { width: 220px; padding: 5px; } </style> </head> <body ng-controller="myController"> <h1> w3wiki </h1> <h3> Approach 2: Using Custom Filter in ng-options </h3> <div class="filter-container"> <div class="filter-input"> <label for="countrySelect"> Filter by Country: </label> <input type="text" ng-model="filterText" id="filterText" placeholder="Enter country"> </div> <div> <label for="countrySelect"> Select a Country: </label> <select id="countrySelect" ng-model="selectedCountry" ng-options= "country.name for country in countries | filter: { name: filterText }"> <option value="" style="display:none;"> -- Select Country -- </option> </select> </div> <div> <p> Selected Country: {{ selectedCountry.name }} </p> <p> Country Code: {{ selectedCountry.code }} </p> </div> </div> <script> var app = angular.module("myApp", []); app.controller("myController", function ($scope) { $scope.countries = [ { name: "United States", code: "US" }, { name: "Canada", code: "CA" }, { name: "United Kingdom", code: "UK" }, { name: "Germany", code: "DE" }, { name: "France", code: "FR" }, { name: "Australia", code: "AU" }, { name: "India", code: "IN" }, { name: "China", code: "CN" }, { name: "Japan", code: "JP" }, { name: "Brazil", code: "BR" } ]; $scope.filterText = ""; $scope.selectedCountry = {}; }); </script> </body> </html> |
Output:
How to filter by object property in AngularJS?
Filtering by object property in AngularJS is the concept of choosing the specific objects from the data array which is based on the individual properties. In creating a web application, this is the most common task that deals with the data that needs to be sorted and then displayed to the user. Developers like us can do this thing by using the filter function or can use other methods to perform the filtering by their properties. In this article, we will see two different approaches to filtering by object property in AngularJS.
Contact Us