英文:
AngularJs filter for few values doesn't work
问题
我正在使用AngularJS进行工作，一切都运行得很顺利，但当我搜索薪水为30的人时（这只是一个示例），它不起作用，如果我添加一个更多的值，它就开始工作了，有人可以解释一下问题出在哪里吗？
Plunker链接https://plnkr.co/edit/bCz8jq8KSd7XCk2WmHo1?p=info
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
Rows to display : <input type="number" step="1" ng-model="rowLimit" max="5" min="0" />
Sort By :
<select ng-model="sortColumn">
<option value="name">Name ASC</option>
<option value="+dateOfBirth">Date of Birth ASC</option>
<option value="+gender">Gender ASC</option>
<option value="-salary">Salary DESC</option>
</select>
Search : <input type="text" placeholder="Search employees" ng-model="searchText" />
<!-- Search : <input type="text" placeholder="Search employees" ng-model="searchText.city"/> -->
Hide Salary: <input type="checkbox" ng-model="hideSalary" />
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary(number)</th>
<th ng-hide="hideSalary">Salary(currency)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in emp | limitTo:rowLimit | orderBy:sortColumn | filter:searchText">
<!-- <tr ng-repeat="employee in emp | limitTo:rowLimit | orderBy:'-firstName'"> -->
<td>{{employee.firstName | uppercase}}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.DOB | date:"dd-MM-yyyy"}}</td>
<td>{{employee.gender | lowercase}}</td>
<td>{{employee.salary | number:2}}</td>
<td>{{employee.salary | currency:'$'}}</td>
</tr>
</tbody>
</table>
</body>
</html>
script.js
var myApp = angular.module('myModule', []).controller("myController", function ($scope) {
var emp = [
{firstName:"Ben",lastName:"Ding",DOB:new Date('December 26, 1991'),gender:"Male",salary:500},
{firstName:"John",lastName:"Deo",DOB:new Date('December 26, 1991'),gender:"Male",salary:6500.21},
{firstName:"Rajesh",lastName:"kumar",DOB:new Date('December 26, 1991'),gender:"Male",salary:3500},
{firstName:"Rashmi",lastName:"singh",DOB:new Date('December 26, 1991'),gender:"female",salary:8500.78},
{firstName:"soumya",lastName:"kumari",DOB:new Date('December 26, 1991'),gender:"female",salary:30}
];
$scope.emp = emp;
$scope.rowLimit = 5;
$scope.sortColumn = "name";
});
英文:
i am working with angularjs filter everything is working smoothly but when i am searching for a person whose salary is 30(just an example) it doesn't work, if i add one more value it starts working can anybody explain me whats wrong with it?
Plunker link https://plnkr.co/edit/bCz8jq8KSd7XCk2WmHo1?p=info
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
Rows to display : <input type="number" step="1" ng-model="rowLimit" max="5" min="0" />
Sort By :
<select ng-model="sortColumn">
<option value="name">Name ASC</option>
<option value="+dateOfBirth">Date of Birth ASC</option>
<option value="+gender">Gender ASC</option>
<option value="-salary">Salary DESC</option>
</select>
Search : <input type="text" placeholder="Search employees" ng-model="searchText" />
<!-- Search : <input type="text" placeholder="Search employees" ng-model="searchText.city"/> -->
Hide Salary: <input type="checkbox" ng-model="hideSalary" />
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary(number)</th>
<th ng-hide="hideSalary">Salary(currency)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in emp|limitTo:rowLimit|orderBy:sortColumn | filter : searchText">
<!-- <tr ng-repeat="employee in emp|limitTo:rowLimit|orderBy:'-firstName'"> -->
<td>{{employee.firstName | uppercase}}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.DOB | date:"dd-MM-yyyy"}}</td>
<td>{{employee.gender |lowercase}}</td>
<td>{{employee.salary|number:2}}</td>
<td>{{employee.salary|currency:'$'}}</td>
</tr>
</tbody>
</table>
</body>
</html>
**script.js**
var myApp = angular.module('myModule', []).controller("myController", function ($scope) {
var emp = [
{firstName:"Ben",lastName:"Ding",DOB:new Date('December 26, 1991'),gender:"Male",salary:500},
{firstName:"John",lastName:"Deo",DOB:new Date('December 26, 1991'),gender:"Male",salary:6500.21},
{firstName:"Rajesh",lastName:"kumar",DOB:new Date('December 26, 1991'),gender:"Male",salary:3500},
{firstName:"Rashmi",lastName:"singh",DOB:new Date('December 26, 1991'),gender:"female",salary:8500.78},
{firstName:"soumya",lastName:"kumari",DOB:new Date('December 26, 1991'),gender:"female",salary:30}
]
$scope.emp = emp;
$scope.rowLimit = 5;
$scope.sortColumn = name;
});
答案1
得分: 2
DOB 值在未应用筛选器的情况下为 "1991-12-25T18:30:00.000Z"，其中包含 30。这就是筛选器未应用的原因。您可以将薪水中的 30 更改为任何其他数字并尝试，它将起作用。日期值将根据当前日期和时间更改。
您可以使用 https://momentjs.com/ 格式化日期值。
英文:
The DOB value without the filter applied is "1991-12-25T18:30:00.000Z" which includes 30 in it. That's the reason the filter is not applied. You can change the salary 30 to any other number and try, it would work. The date value will change based on the current date and time.
You can use https://momentjs.com/ to format the Date value.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论