Tuesday, June 30, 2015

Dynamic filter using AngularJS filter

In the post AngularJS filter, we saw on how to use filters to define a static filter in an array of elements, we can further enhance this by binding the filter text to a textbox control to create a dynamic filter.

In the following example a ng-repeat directive is used to display a list of employees, txtSearch is a textbox which is bound as the filter condition for the list, now as the user types some text in the textbox, the list will get filtered based on the text entered.
<html ng-app>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
                function searchController($scope){
                       $scope.Reset = function() {
                                       $scope.txtSearch = '';
          <div ng-controller="searchController" ng-init="Employees=[
                    Search Text: <input type="text" ng-model="txtSearch"> 
                    <button ng-click="Reset()">Clear</button>
                       <li ng-repeat="emp in Employees | filter:txtSearch">
                         {{ emp.id }} - {{ emp.Name }}<br/>


Search Flipkart Products:

No comments: