我是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;
答案 0 :(得分:0)
查看您的数据,我发现Micheal出生在'February'
月,该名称确实包含字符'fe'
。这就是为什么它出现在过滤结果中的原因。
(您可以通过搜索'ju'
来仔细检查此行为,并且会看到出生在'July'
的Daniel和Martha都出现了。