AngularJs Filter Example Fiddles [How To Search]

In this post, I am going to share the demo example for “Filter Array Object” Example using “TextBox” in Angular 1.5.

In the below example, I have a “Products Object” and render on the “Table Grid” and after that filter product grid using the Search textbox.

Stayed Informed – Live demo Example [fiddles and plunker]

The Example as,
JavaScript Code,

<script>
    angular.element(document).ready(function() {
      var app = angular.module('myApp', []);

      app.controller('myCtrl', ['$scope', 'store', function($scope, store) {
        $scope.search = '';
        $scope.products = [];
        $scope.products = store.getProducts();
        $scope.filterProductsByCategory = function(category) {
          $scope.search = category;
        };
      }]);

      // fake service, substitute with your server call ($http)
      app.factory('store', function() {
        var products = [{
          name: 'Apples',
          category: 'Fruit',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Pears',
          category: 'Fruit',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Grapes',
          category: 'Fruit',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Potato',
          category: 'Vegetables',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Green Beans',
          category: 'Vegetables',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Broccoli',
          category: 'Vegetables',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Milk',
          category: 'Dairy',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Yogurt',
          category: 'Dairy',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Cheese',
          category: 'Dairy',
          AddedBy: 'Anil Singh'
        }];

        return {
          getProducts: function() {
            return products;
          }
        };

      });

      angular.bootstrap(document, ['myApp']);
    });
  </script>

HTML Code,

<div ng-app="myApp" ng-controller="myCtrl">
    <h2>Search Product: </h2>
    <input type="text" ng-model="search" placeholder="Search..." />
    <table cellpadding="5" cellspacing="1" border="1" style="width:100%;">
      <tr>
        <th>Product</th>
        <th>Category</th>
        <th>AddedBy</th>
      </tr>
      <tr ng-repeat="product in products | filter:search | orderBy:'name'">
        <td>{{product.name}}</td>
        <td>{{product.category}}</td>
        <td>{{product.AddedBy}}</td>
      </tr>
    </table>
  </div>

Full Live Code as,

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>angularjs filter example Plunker</title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
  <script>
    angular.element(document).ready(function() {
      var app = angular.module('myApp', []);

      app.controller('myCtrl', ['$scope', 'store', function($scope, store) {
        $scope.search = '';
        $scope.products = [];
        $scope.products = store.getProducts();
        $scope.filterProductsByCategory = function(category) {
          $scope.search = category;
        };
      }]);

      // fake service, substitute with your server call ($http)
      app.factory('store', function() {
        var products = [{
          name: 'Apples',
          category: 'Fruit',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Pears',
          category: 'Fruit',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Grapes',
          category: 'Fruit',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Potato',
          category: 'Vegetables',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Green Beans',
          category: 'Vegetables',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Broccoli',
          category: 'Vegetables',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Milk',
          category: 'Dairy',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Yogurt',
          category: 'Dairy',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Cheese',
          category: 'Dairy',
          AddedBy: 'Anil Singh'
        }];

        return {
          getProducts: function() {
            return products;
          }
        };

      });

      angular.bootstrap(document, ['myApp']);
    });
  </script>
</head>

<body>
  <div ng-controller="myCtrl">
    <h2>Search Product: </h2>
    <input type="text" ng-model="search" placeholder="Search..." />
    <table cellpadding="5" cellspacing="1" border="1" style="width:100%;">
      <tr>
        <th>Product</th>
        <th>Category</th>
        <th>AddedBy</th>
      </tr>
      <tr ng-repeat="product in products | filter:search | orderBy:'name'">
        <td>{{product.name}}</td>
        <td>{{product.category}}</td>
        <td>{{product.AddedBy}}</td>
      </tr>
    </table>
  </div>
</body>

</html>

Stayed Informed – AngularJs Live Multiple Examples

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2