Filtering is really easy in Angular JS.

In Angular JS we use the “filter” keyword to do the filtering.

Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>Search:</p>

<p><input type="text" ng-model="my_search"></p>

<ul>
  <li ng-repeat="name in names | filter:my_search">
    {{ name }}
  </li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Google',
        'Apple',
        'Samsung',
        'HTC',
        'OnePlus',
        'Sony'
    ];
});
</script>

<p>The list will only consists of names matching the filter.</p>


</body>
</html>

Copy and paste the above code in an html and run. You will see the result.

Here we have a variable named “my_search” which is a textbox in HTML. so the filter value is taken from the textbox.
You can see the ng-model=”my_search” set in the textbox.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.