AngularJS and filter some specific fields

Question

I have an Angular app that can filter on all fields in the JSON files that I have.

I have Id, FullName, FirstName, LastName, StartNo, DateOfBirth. I want to be able to search all these fields exept the Id field.

For example, when i write 1212 I get the person with the StartNo 1212 and the person with the Id 1212. I do not want to be able to filter on the Id's, how do I remove that? I only want to have one <input> field, not many, where I can set different models?

All help and even directions to relevant docs is appreciated.

It looks like this.

<input ng-model="searchText">
<table>
<tr ng-repeat=runner in runners | filter:searchText>
<td>{{runner.StartNo}}</td>
<td>{{runner.FirstName}}</td>
<td>{{runner.LastName}}</td>
<td>{{runner.DateOfBirth}}</td>
</tr>
</table>

Sort of.

@ExpertSystem I guess now my answer satisfies the requirement — Nidhish Krishnan
– Nidhish Krishnan, Commented Sep 1, 2014 at 9:59
@NidhishKrishnan: It does (although I can imagine more efficient approaches :P) — gkalpak
– gkalpak, Commented Sep 1, 2014 at 10:07
@ExpertSystem yes sure you can....since you are born to do that :P — Nidhish Krishnan
– Nidhish Krishnan, Commented Sep 1, 2014 at 10:17

Nidhish Krishnan · Accepted Answer · 2014-09-02 09:55:18Z

2

You can do that by using regular expression like as shown below

$scope.searchFilter = function (obj) {
        var re = new RegExp($scope.searchText, 'i');
        return !$scope.searchText || re.test(obj.StartNo) || re.test(obj.FirstName)|| re.test(obj.LastName)|| re.test(obj.DateOfBirth);
    };

Complete code is given below.

Working JSFiddle

Html

<div ng-app="myApp">
    <div ng-controller="PeoplesCtrl">
        <form>
            <label>Filter by:</label>
            <input type="text" ng-model="searchText">
            <table>
                <tr>
                    <th></th>
                </tr>
                <tr ng-repeat="runner in runners | filter:searchFilter">
                    <td ng-class-odd="'odd'">{{runner.StartNo}}</td>
                    <td ng-class-odd="'odd'">{{runner.FirstName}}</td>
                    <td ng-class-odd="'odd'">{{runner.LastName}}</td>
                    <td ng-class-odd="'odd'">{{runner.DateOfBirth}}</td>
                </tr>
            </table>
        </form>
    </div>
</div>

script

var myApp = angular.module('myApp', []);

myApp.factory('Peoples', function () {
    var Peoples = {};
    Peoples.runners = [{
        Id : "1212",
        StartNo: "001",
        FirstName : "Tony Stark",
        LastName : "Robert",
        DateOfBirth : "12/05/1989"
    },{
        Id : "1213",
        StartNo: "002",
        FirstName : "Chris",
        LastName : "Evans",
        DateOfBirth : "10/01/1988"
    },{
        Id : "1214",
        StartNo: "003",
        FirstName : "Scarlett",
        LastName : "Banner",
        DateOfBirth : "01/05/1990"
    },{
        Id : "1215",
        StartNo: "004",
        FirstName : "Clark",
        LastName : "Robert",
        DateOfBirth : "19/08/1989"
    },{
        Id : "1216",
        StartNo: "005",
        FirstName : "Hiddleston",
        LastName : "Robert",
        DateOfBirth : "22/06/1989"
    }];

    return Peoples;
});

function PeoplesCtrl($scope, Peoples) {
    $scope.runners = Peoples.runners;

    $scope.searchFilter = function (obj) {
        var re = new RegExp($scope.searchText, 'i');
        return !$scope.searchText || re.test(obj.StartNo) || re.test(obj.FirstName)|| re.test(obj.LastName)|| re.test(obj.DateOfBirth);
    };
}

edited Sep 2, 2014 at 9:55

answered Sep 1, 2014 at 9:59

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

petur Over a year ago

The Id is not an Integer, it's an String, just like the others, will this work anyhow?

Nidhish Krishnan Over a year ago

i have updated my answer with Id as string, check the jsfiddle

petur Over a year ago

I'm not thrilled by this solution. I should be able to choose wich field I should not use. When I click on a user, the user should also be able to send the ID, hence the user has to know wich ID it got.

Collectives™ on Stack Overflow

AngularJS and filter some specific fields

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related