CODEWITHSUNDEEP
javascriptangularjs
petur
petur

Reputation: 1386

AngularJS and filter some specific fields

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.

Upvotes: 1

Views: 131

Answers (1)

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20751

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);
    };
}

Upvotes: 2

Related Questions