python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions