Aus irgendeinem Grund nicht in der Lage, ich bin dein plunkr gabeln, aber hier ist eine Lösung. Die JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
$scope.reminderTypes = [{"ReminderTypeID":1,"Name":"STAMPING OF SPA","EmailTemplate":null},{"ReminderTypeID":2,"Name":"CONDITION PRECEDENT","EmailTemplate":null},{"ReminderTypeID":3,"Name":"STATE AUTHORITY CONSENT","EmailTemplate":null},{"ReminderTypeID":4,"Name":"PAYMENT OF BALANCE PURCHASE PRICE","EmailTemplate":null},{"ReminderTypeID":5,"Name":"CKHT FILING","EmailTemplate":null},{"ReminderTypeID":6,"Name":"TRANSFER FORM 14A","EmailTemplate":null},{"ReminderTypeID":7,"Name":"TRANSFER NOTICE OF ASSESSMENT","EmailTemplate":null}]
$scope.sortBy = 'Name';
$scope.sortDescending = false;
$scope.filteredRT = angular.copy($scope.reminderTypes);
$scope.searchText = '';
$scope.maxSize = 3;
$scope.totalItems = 7;
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.filteredRT.indexOf(value);
return (begin <= index && index < end);
};
$scope.filter = function(){
var results = $scope.filteredRT;
results.length = 0;
var searchText = $scope.searchText;
var reminderTypes = $scope.reminderTypes;
for(var i = 0; i < reminderTypes.length; ++i){
if(searchText.length > 0){
if(reminderTypes[i].Name.includes(searchText)){
results.push(reminderTypes[i]);
}
} else {
results.push(reminderTypes[i]);
}
}
$scope.totalItems = results.length;
}
});
Und die HTML
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PagerDemoCtrl">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<p>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<input type="text" class="form-control" placeholder="Enter Search Text"
ng-model="searchText" ng-change="filter()" />
</div>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr class="bg-info">
<th></th>
<th>
<a ng-click="sortBy = 'Name'; sortDescending = !sortDescending">Reminder Type Name</a>
<span ng-show="sortBy == 'Name' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortBy == 'Name' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
</th>
<th>
<a ng-click="sortBy = 'EmailTemplate'; sortDescending = !sortDescending">Email Template</a>
<span ng-show="sortBy == 'EmailTemplate' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortBy == 'EmailTemplate' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="reminderType in filteredRT | filter: paginate | orderBy:sortBy:sortDescending">
<td>
<a class="btn btn-sm btn-primary" ng-click="editReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
<a class="btn btn-sm btn-info" ng-click="detailsReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-eye-open"></i> View</a>
</td>
<td>{{reminderType.Name}}</td>
<td>{{reminderType.EmailTemplate}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right">
Showing page {{currentPage}} of {{numPages}}
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<uib-pagination class="pagination-sm"
total-items="totalItems" max-size="maxSize" items-per-page="numPerPage" num-pages="numPages"
ng-model="currentPage" boundary-links="true" rotate="false"></uib-pagination>
</div>
</div>
</div>
</body>
</html>
Insbesondere Ich habe eine ngChange Richtlinie im Eingangsfilter, und nun eine Kopie von reminderTypes verwendet wird. Leider denke ich, dass das, was Sie erreichen wollen, ein bisschen zu komplex ist, um nur mit Winkelfiltern zu arbeiten. Ich habe die Reihenfolge nicht getestet, aber die Seitenzahl scheint auf diese Weise gut zu funktionieren.
EDIT: juste die richtige Gabel hinzufügen, die auf die Frage zu antworten: https://plnkr.co/edit/HMw8U4OUsW5DNDGfQKHY?p=preview
als Ihren Vorschlag '
Haben Sie versucht, was ich gepostet? – Nephidream
Ja, aber es funktioniert immer noch nicht. Sie können hier überprüfen: https://plnkr.co/edit/2Q9qk4smErwQMc5tyxdn?p=preview – Willy
Verwandte Themen