Angular Js搜索过滤器无效

时间:2016-06-26 15:24:44

标签: javascript angularjs

我是Angular Js的新手,并尝试实现基本的搜索过滤功能。以下是我的代码。但我没有得到预期的产量。例如,当我输入' fe'进入搜索框,我也得到一排没有' fe'其列中的文字。我错过了什么?感谢。



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

});
&#13;
<!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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

查看您的数据,我发现Micheal出生在'February'月,该名称确实包含字符'fe'。这就是为什么它出现在过滤结果中的原因。

(您可以通过搜索'ju'来仔细检查此行为,并且会看到出生在'July'的Daniel和Martha都出现了。