filter in angularjs

filter in angularjs mvc 5

The filter is used to filter ng-repeat/ng-grid/ng-init etc. The below video look like working functionality and the code sample are give below.

The following syntax are used to filter array : {{ expression | filter }} 





<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script>
    angular.module('FilterApp', [])
      .controller('FilterController', ['$scope', function ($scope) {
          $scope.filterList = [
            { name: 'Anil Singh', web: 'www.code-sample.com', status: true },
              { name: 'Dilip Singh', web: 'www.code-sample.net', status: false },
              { name: 'Upendra Singh', web: 'www.code-sample.in', status: false },
              { name: 'Sunil Singh', web: 'www.code-sample.co.in', status: false },
              { name: 'Sushil Singh', web: 'www.code-sample.org', status: false }
          ];
      }]);
</script>

<div ng-app="FilterApp">
    <div class="row">
        <div class="col-md-12">
            <p>
                <h1>Filer array in Angularjs : www.code-sample.com</h1>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div ng-controller="FilterController">
                <p>
                    Filter Text : <input type="text" ng-model="filterText" placeholder="filter." class="input-text">
                </p>
                <span> Total of {{filterList.length}} rows</span>
                <hr />
                <div class="col-md-12" ng-repeat="flt in filterList | filter : filterText">
                    <div class="col-md-2">{{flt.name}}</div>
                    <div class="col-md-2">{{flt.web}}</div>
                    <div class="col-md-2">{{flt.status}}</div>
                </div>
                <hr />
            </div>           
        </div>
    </div>
</div>
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