Angularjs Use Filter On Search Bar for an Array List of Items

Saturday, 31 December 2016

This article helps you to create a search bar using angularjs and search items from the list of array items.

First open your app.js file and create a list of array items. According to given below example.

angular.module('myapp', [])

  name: "Amit",
  name: "Yovraj",

  name: "Mukesh",


Now create a custom filter if you want to search by using name, address or id.
Use below example to create your custom filter.

.filter('searchFor', function(){
 // All filters must return a function. The first parameter
 // is the data that is to be filtered, and the second is an
 // argument that may be passed with a colon (searchFor:searchString)

    return function(arr, searchString){
            return arr;
        var result = [];

       searchString = searchString.toLowerCase();
// Using the forEach helper method to loop through the array
        angular.forEach(arr, function(item){
       var" "+item.address+" "; 
   return result; 

Now on html page create a search bar and show all the list of array items.

<input type="text" ng-model="searchString">

<div ng-repeat=i in items| searchFor:searchString>

Follow all the instruction carefully if facing any problem comment below.
Thank You.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
Related Posts Plugin for WordPress, Blogger...

Most Reading