Object property filter in AngularJS

How to filter JSON data based on their properties value in AngularJS?

To simply filter entire JSON data items based on keyword, read this post.

Many a times, we get a requirement where we need to fiter data based on a particular field/property of the item in the collection. To do that we can follow below approach.

<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 record/item property</h3>
        Filter Username: <input type="text" ng-model="fUserName" />
        PIN : <input type="text" ng-model="fPIN" />
        <table class="table">
            <tr>
                <th>UserName</th>
                <th>Address</th>
                <th>PIN</th>
            </tr>
            <tr ng-repeat="member in Members | filter: { username: fUserName, pin : fPIN }">
                <td>{{member.username}}</td>
                <td ng-bind="member.address"></td>
                <td>{{member.pin}}</td>
            </tr>
        </table>
</div>

The script block is same as explained in the previous post. A member JSON collection. In the HTML block, we have two text boxes, Username and PIN and we want to filter data based on both text box values.

Every other thing is same as in the previous post, just notice on the highlighted code, here we have passed username and pin both text box ng-model directive as parameter to the filter.

As soon as the JSON data match the values of both text box value, the data is displayed.

NOTE: The empty value is ignored by AngularJS. Like in this case, if the PIN textbox value is empty, the data is filtered only based on username textbox value.

Output

Object property filter