angularjs filter directive

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.


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="[email protected]" 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!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book