Angularjs Custom Filter

In this example we are giving you custom Angularjs filter with ng-repeat function. this function work like loop. we are giving you best way for how to implement custom search with Angularjs.

this is light weight Angularjs custom filter example. you can simply use in your project. nicesnippets.com provide free demo,source code and example.

Example Demo

Search

Languages Name Devloper Name
{{data.lang_name}} {{data.developer_name}}

Js Code

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

Html Code

<div ng-app="" ng-init="live_data=[{lang_name:'Laravel',developer_name:'Mike'},
                                      {lang_name:'PHP',developer_name:'Jonh'},
                                      {lang_name:'Angularjs',developer_name:'Zip'},
                                      {lang_name:'Vuejs',developer_name:'Keti'},
                                      {lang_name:'Mysql',developer_name:'Meera'},
                                      {lang_name:'Javascript',developer_name:'Zil'}]">
    <p>Search <input class="form-control" ng-model="query_string" type="text"></p>
    <table id="searchResults" class="table  table-bordered">
    <tbody><tr>
      <th>Languages Name</th>
      <th>Devloper Name</th>
    </tr>
    <tr ng-repeat="data in live_data | filter:query_string">
      <td>{{data.lang_name}}</td>
      <td>{{data.developer_name}}</td>
    </tr>
    </tbody></table>
</div>
Add