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 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..
|
