2016-06-26 5 views
0

Я новичок в Angular Js и пытается реализовать функцию основного фильтра поиска. Ниже мой код. Но я не ожидаю выхода. Например, когда я ввожу 'fe' в поле поиска, я также получаю строку, в которой нет текста fe в своих столбцах. Что мне не хватает? Благодарю.Угловой фильтр поиска Js не работает

/// <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

Глядя на ваши данные, я вижу, что Micheal родился в месяце «Февраль», в котором действительно содержатся символы fe. Я считаю, что именно поэтому он появляется внутри фильтрованных результатов. – danii

+0

Дании - это правильно. Также будьте осторожны при создании Date, js подсчитывает месяцы от 0 до 11. Январь равен 0. Декабрь - 11. –

+0

Спасибо, ребята. Что объясняет его. – vabii

ответ

0

Глядя на ваши данные, я вижу, что Мичил родился в месяце 'February', имя действительно содержит символы 'fe'. Вот почему он появляется внутри отфильтрованных результатов.

(Вы можете дважды проверить это поведение, выполнив поиск 'ju' и увидит, что и Даниэль, и Марта, родившийся в 'July', появляются).

Смежные вопросы