【问题标题】：Search filter AngularJS搜索过滤器 AngularJS
【发布时间】：2017-03-20 06:31:42
【问题描述】：

我正在编写一个可以使用文本框条目搜索表格数据的代码。

我的 HTML 代码如下，

<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 脚本：

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

输出：

表格中的第三行没有字符'r'。但是当我使用“r”搜索时，过滤器无法正常工作。谁能帮我解决这个问题？

谢谢

【问题讨论】：

即使第一行也没有 r 看到这个小提琴jsfiddle.net/zjwvfuyd/86 它应该是这样工作的
您想为所有列或任何特定列应用过滤器吗？
@GangadharJannu 对于所有列

标签： javascript angularjs angularjs-filter

【解决方案1】：

对于所有回答的人，问题在于角度版本。它工作到 1.3 older version 之后就不能工作了 latest versions

不工作

jsfiddle 角度为 1.4.0

工作

jsfiddle 角度为 1.3.9

我仍然需要找出导致问题的原因

【讨论】：

【解决方案2】：

创建一个自定义过滤器，如下所示。这会起作用的

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

【讨论】：

【解决方案3】：

发生这种情况是因为 Doj 在 3 月和 1 月等月份包含 r。所以过滤器工作正常。

【讨论】：

我也这么认为，但日期过滤器仅适用于月份的前三个字符。我必须在 Jan 中搜索 January。

【解决方案4】：

演示

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>

【讨论】：

我正在使用角度 CDN ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js。您的角度版本是工作文件。你能帮我弄清楚新版本吗？
因为Doj 属性的值在March 和January 中包含r。 code 和 angular version 没有问题。