#angularjs #angularjs-directive #angularjs-scope #angularjs-ng-click #ngtable
#angularjs #angularjs-директива #angularjs-scope #angularjs-ng-click #ngtable
Вопрос:
сначала я использовал шаблон ng table pager
Я не могу использовать свою пользовательскую функцию, такую как ng-click =’first()’ вместо ng-click =»params.page (страница.номер)»
а затем вызовите параметр внутри его области видимости .
Кто-нибудь может мне помочь в этом. Спасибо.
Ответ №1:
Пользовательский шаблон разбивки на страницы, который привязан к ngTable, создает новую область, из-за которой только функции, определенные с параметрами, такими как params.page (1) и т.д. работает. Таким образом, вместо привязки пользовательского шаблона разбивки на страницы к ngTable можно использовать отдельный набор элементов управления для обеспечения функциональности разбивки на страницы.
Смотрите plunkr:http://plnkr.co/edit/dZf4UkRbhQd2Jixi9f39?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">
{{user.name}}
</td>
<td data-title="'Age'">
{{user.age}}
</td>
</tr>
</table>
<p><strong>Page:</strong> {{ tableParams.page() }}</p>
<button class="btn btn-default" ng-click="previous()">Previous</button>
<button class="btn btn-default" ng-click="next()">Next</button>
<button class="btn btn-default" ng-click="info()">Info</button>
</body>
</html>
script.js
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
var count=1;
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5 , // count per page
}, {
counts: [], // hide page counts control
total: 1, // value less than count hide pagination
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
this.current=params.count();
}
});
$scope.next=function(){
console.log("next called");
count ;
$scope.tableParams.page(count);
};
$scope.previous=function(){
console.log("previous called");
if(count>1)
count--;
$scope.tableParams.page(count);
}
$scope.info=function(){
console.log("info called");
console.log("page: " (($scope.tableParams.page() - 1) * $scope.tableParams.count()) "to" ($scope.tableParams.page() * $scope.tableParams.count()));
}
});
Здесь я определил пользовательские функции в контроллере и использовал $scope.tableParams.page (count) для разбиения на страницы для конкретной страницы.