angularjs不会过滤其他页面

时间:2016-11-15 08:29:43

标签: javascript angularjs asp.net-mvc

我有一个简单的代码,可以从控制器中获取员工,我想用分页过滤这些记录。当我在第一页上过滤时,一切正常但是,当我想从其他页面过滤时,它不会过滤并且不显示任何内容。

我的代码如下:

-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

https://jsfiddle.net/neslisahozdemir/khbbbe47/4/

1 个答案:

答案 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

希望它会对你有所帮助。