Search filter AngularJS

Question

I am working on a code where a table data can be searched with a text box entry.

My HTML code goes as follows,

<body ng-app="myModule">
    <div ng-controller="myController">
        <div><input type="text" ng-model="searchText" placeholder="Enter Search Text" /><br><br></div>
        <table>
            <thead>
            <th>Person</th>
            <th>Salary PA</th>
            <th>Date Of Joining</th>
            <th>Programs Completed</th>
            </thead>
            <tbody ng-repeat="person in people|filter:searchText">
            <td>{{person.name|uppercase}}</td>
            <td>{{person.salaryPA|currency}}</td>
            <td>{{person.Doj|date:"MM/dd/yyyy"}}</td>
            <td>{{person.ProgramsCompleted|number}}</td>
            </tbody>
        </table>
    </div>
</body>

Java Script:

angular.module("myModule", []).controller("myController", functionCall);
function functionCall($scope) {
var people = [{
        name: "Hulk",
        salaryPA: 25000,
        Doj: new Date("March 18, 2014"),
        ProgramsCompleted: 250,
    }, {
        name: "Superman",
        salaryPA: 12000,
        Doj: new Date("March 18, 2014"),
        ProgramsCompleted: 200,
    }, {
        name: "Batman",
        salaryPA: 12500,
        Doj: new Date("January 18, 2014"),
        ProgramsCompleted: 180,
    }];
$scope.people = people;
}

Output:

The third row in the table does not have the character 'r'. But when I search with 'r', filter is not working as it should. Could anyone help me figure this?

Thanks

Even the first row don't have r See this fiddle jsfiddle.net/zjwvfuyd/86 It works as it should be — Vinod Louis
– Vinod Louis, Commented Mar 20, 2017 at 6:39
Do you want to apply filter for all columns or any specific column? — Gangadhar Jannu
– Gangadhar Jannu, Commented Mar 20, 2017 at 6:44

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

For all those who answered, the issue is with angular version. It is working until 1.3 older version and not working after that latest versions

Not working

jsfiddle with angular 1.4.0

Working

jsfiddle with angular 1.3.9

I still needs to figure out what is cauing the issue

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 20, 2017 at 6:57

Gangadhar Jannu

4,4726 gold badges33 silver badges55 bronze badges

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

Comments

Rakesh Chand · Accepted Answer · 2017-03-20 06:41:34Z

Create a custom filter like following. That will work

.filter('SalaryFilter', function() {
  return function(people, searchText) {
    return people.filter(function(person) {
      if (
        person.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1 ||
        person.salaryPA === searchText ||
        person.Doj === new Date(searchText) || 
        person.ProgramsCompleted === searchText
      ) {
        return vendor;
      }
    });
  };
})

Ram Ratan Bairar · Accepted Answer · 2017-03-20 06:48:21Z

0

This is happening because Doj which contains r in months like March and January. So filter is working properly.

answered Mar 20, 2017 at 6:48

Ram Ratan Bairar

1741 silver badge11 bronze badges

1 Comment

user3611810 Over a year ago

I thought that too but date filter works only for the first three characters of Month. I have to search Jan for January.

Rohìt Jíndal · Accepted Answer · 2017-03-20 06:53:44Z

DEMO

var app = angular.module('myModule',[]);
app.controller('myController',function($scope) {
    var people = [{
        name: "Hulk",
        salaryPA: 25000,
        Doj: new Date("March 18, 2014"),
        ProgramsCompleted: 250,
    }, {
        name: "Superman",
        salaryPA: 12000,
        Doj: new Date("March 18, 2014"),
        ProgramsCompleted: 200,
    }, {
        name: "Batman",
        salaryPA: 12500,
        Doj: new Date("January 18, 2014"),
        ProgramsCompleted: 180,
    }];
$scope.people = people;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule">
 <div ng-controller="myController">
 <div><input type="text" ng-model="searchText" placeholder="Enter Search Text" /><br><br></div>
        <table>
            <thead>
            <th>Person</th>
            <th>Salary PA</th>
            <th>Date Of Joining</th>
            <th>Programs Completed</th>
            </thead>
            <tbody ng-repeat="person in people|filter:searchText">
            <td>{{person.name|uppercase}}</td>
            <td>{{person.salaryPA|currency}}</td>
            <td>{{person.Doj|date:"MM/dd/yyyy"}}</td>
            <td>{{person.ProgramsCompleted|number}}</td>
            </tbody>
        </table>
 </div>
</div>

I am using angular CDN ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js. Your version of angular is working file. Could you help me figure out with newer version?
because value of Doj property contains r in March and January. There is no issue with the code and angular version.

Collectives™ on Stack Overflow

Search filter AngularJS

4 Answers 4

Not working

Working

Comments

Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Not working

Working

Comments

Comments

1 Comment

2 Comments

Related