Angular Js search filter not working
Question
I am new to Angular Js and trying to implement the basic search filter feature. Below is my code. But I am not getting expected output. For example, when I type 'fe' into the search box, I am also getting a row that does not have 'fe' text in its columns. What am I missing? Thanks.
/// <reference path="angular.js" /> var myModule = angular.module("myModule", []) .controller("controllerObj", function ($scope) { var employees = [ { name: "Dave", dateOfBirth: new Date(1988, 12, 12), gender: "male", salary: "80000" }, { name: "Martha", dateOfBirth: new Date(1985, 06, 12), gender: "female", salary: "60000" }, { name: "Sarah", dateOfBirth: new Date(1970, 12, 3), gender: "female", salary: "75000" }, { name: "Chris", dateOfBirth: new Date(1960, 7, 8), gender: "male", salary: "110000" }, { name: "Daniel", dateOfBirth: new Date(1982, 6, 22), gender: "male", salary: "50000" }, { name: "Micheal", dateOfBirth: new Date(1982, 1, 19), gender: "male", salary: "190000" } ]; $scope.employees = employees; var sortOrder = '+'; var sortColumn = 'name'; $scope.sortExpression = sortOrder + sortColumn; $scope.sort = function (column) { if (column == sortColumn) { sortOrder = (sortOrder == '+') ? '-' : '+'; } else { sortColumn = column; sortOrder = '+'; } $scope.sortExpression = sortOrder + sortColumn; }; });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script src="Scripts/Script.js"></script> <style> table { border-collapse:collapse; } td { border: 1px solid black; padding: 5px; } </style> </head> <body data-ng-app="myModule"> <div data-ng-controller="controllerObj"> Search: <input type="text" placeholder="Search Employees" ng-model="searchText" /> <br /> <br /> <table> <thead> <tr> <td><a href="#" ng-click="sort('name')">Name</a></td> <td><a href="#" ng-click="sort('dateOfBirth')">Date of Birth</a></td> <td><a href="#" ng-click="sort('gender')">Gender</a></td> <td><a href="#" ng-click="sort('salary')">Salary</a></td> </tr> </thead> <tbody> <tr ng-repeat="employee in employees | filter : searchText | orderBy : sortExpression"> <td>{{employee.name}}</td> <td>{{employee.dateOfBirth | date : 'MM/dd/yyyy'}}</td> <td>{{employee.gender | lowercase}}</td> <td>{{employee.salary | currency : 'USD$ '}}</td> </tr> </tbody> </table> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2016-06-27 08:24:27
Looking at your data, I see that Micheal is born in the month of 'February' , which name indeed contains the characters 'fe' . That's why it's appearing inside the filtered results.
(You can double check this behavior by searching for 'ju' and will see that both Daniel and Martha, born in 'July' , show up).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.