我有一个简单的代码,可以从控制器中获取员工,我想用分页过滤这些记录。当我在第一页上过滤时,一切正常但是,当我想从其他页面过滤时,它不会过滤并且不显示任何内容。
我的代码如下:
-filter.js
angular.module('MyApp', ['ui.bootstrap']).controller('MyController', function ($scope, EmployeesService) {
$scope.Employees = null;
$scope.currentPage = 1;
$scope.pageSize = 2;
$scope.maxSize = 100;
EmployeesService.GetEmployees().then(function (d) {
$scope.Employees = d.data; // Success
}, function () {
alert('Failed'); // Failed
})
})
.service('EmployeesService', function ($http) {
var service = {};
service.GetEmployees = function () {
return $http.get('/Employees/GetEmployees');
}
return service;
})
.filter('start', function () {
return function (input, start) {
if (!input || !input.length) { return; }
start = +start;
return input.slice(start);
};
});
-Index.cshtml
<div ng-app="MyApp">
<div ng-controller="MyController">
<input type="text" ng-model="filterText" name="searchString" placeholder="Search for names.." class="form-control"><br />
<div ng-repeat="emp in Employees |orderBy: 'employeeName'| filter: filterText | start: (currentPage-1) * pageSize | limitTo: pageSize"
class="alert alert-warning col-md-12">
<span ng-bind="emp.employeeName"></span> <b>:</b>
<span ng-bind="emp.employeePhoneNumber"></span>
</div>
<pagination ng-model="currentPage" total-items="Employees.length" items-per-page="pageSize"></pagination>
</div>
</div>
提前谢谢。
抱歉拖延。这是我的工作 JSFiddle :
答案 0 :(得分:0)
据我了解您的查询,我认为您会通过更改过滤器的顺序找到您的解决方案。
尝试使用
<tr ng-repeat="emp in Employees | filter: filterText|orderBy: 'employeeName' |start: (currentPage-1) * pageSize | limitTo: pageSize" class="alert alert-warning col-md-12">
现在过滤器正在页面工作(意思是如果你输入“C”,你会在第1,2页找到每个记录的数据)
在更改过滤器序列后,您将获得同一页面中的数据(在第1页2条记录中),以获取过滤器文本“C”。
查找更新的fiddle
希望它会对你有所帮助。