---

Search posts under AngularJS:

---

Simple data filter in AngularJS

How to implement simple filter of array data in AngularJS?

To implement simple filter of array data where filter is done based on keyword found from the entire items of the array, we can follow this approach.

In the <script> block, we have a JSON collection contains 4 records. Next, we have declared an app and controller. In the last we have set the $scope Member property to the JSON collection.

<script>
    var members = [
            { username: 'SheoNarayan', address: 'Hyderabad', pin : '500049' },
            { username: 'Munna', address: 'Bokaro', pin: '8256598' },
            { username: 'Jay', address: 'Aurangabad', pin: '824101' },
            { username: 'Sreeni', address: 'New York', pin: 'BY-524' }
    ];

    var app = angular.module("app", []);
    app.controller("ListController", ["$scope", function ($scope) {
        $scope.Members = members;
    }]);
</script>

<div ng-app="app" ng-controller="ListController">
        <h3>Filtering based on all columns</h3>
        Filter <input type="text" ng-model="allKeyword" />
        <table class="table">
            <tr>
                <th>UserName</th>
                <th>Address</th>
                <th>PIN</th>
            </tr>
            <tr ng-repeat="member in Members | filter: allKeyword">
                <td>{{member.username}}</td>
                <td ng-bind="member.address"></td>
                <td>{{member.pin}}</td>
            </tr>
        </table>
</div>

In the HTML block, we have a HTML text box that will work as a keyword textbox (to be used to filter records). this text box has ng-model directive set that will intern be used in filtering the data. We have used ng-repeat directive to loop through each item from Members JSON collection. Notice, the highlighted code where we have used filter keyword and after that the model name (this is nothing but the ng-model directive of the text box). The properties of each item of the collection is being written into the cells of the table.

Now when we type some keywords in the text box, the data is filtered in real time from the JSON collection and bounded to the table.