0
Ich habe jetzt einen Todolist, aber ich möchte meinen Todolist mit Paginierung haben: wenn es 10 Todos erreicht, wird der nächste auf der 2dn Seite sein und dann wird 20 den nächsten Willen am 3. erreichen Seite und so weiter. Ich würde das auch die Liste aktualisiert wird, wenn eine der todos istTodolist mit Paginierung angularjs
var app = angular.module("myapp", ['ui.bootstrap']);
app.controller('TodoCtrl', ['$scope', '$filter', function ($scope, $filter)
{
\t $scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.maxSize = 5;
\t $scope.list = [];
\t //thrid argument if we watch the list all the times
\t $scope.$watch('list', function()
\t {
\t \t $scope.remain = $filter('filter')($scope.list, {completed:false}).length;
\t }, true)
\t $scope.removeTodo = function(index)
\t {
\t \t //delete on element from index
\t \t $scope.list.splice(index, 1);
\t }
\t $scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
\t $scope.addTodo = function()
\t {
\t \t if ($scope.newTodo != '')
\t \t {
\t \t \t $scope.list.push(
\t \t \t {
\t \t \t // model newTodo
\t \t \t \t name : $scope.newTodo,
\t \t \t \t completed : false
\t \t \t })
\t \t }
\t \t else
\t \t \t alert("Message can not be empty !")
\t \t //to empty task
\t \t $scope.newTodo = '';
\t }
}]);<!DOCTYPE html>
<html>
<head>
\t <meta charset="UTF-8"/>
\t <title>MyTodoList</title>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5
\t /angular.min.js"></script>
\t <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="[email protected]*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
\t <!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
\t <div ng-app="myapp">
\t <section id = "todoapp" ng-controller="TodoCtrl">
\t \t <header id="header">
\t \t \t <h1>MyTodoList</h1>
\t \t \t <form action="#" id="todo-form" ng-submit="addTodo()">
\t \t \t \t <input type="text" id="new-todo" placeholder="New todo" autofocus autocomplete="off" ng-model="newTodo">
\t \t \t </form>
\t \t </header>
\t
\t \t <section id = "main">
\t \t \t <u1 id = "todo-list">
\t \t \t \t <li ng-repeat="todo in list.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))" ng-class="{completed: todo.completed}">
\t \t \t \t \t <div class="view">
\t \t \t \t \t \t <input type="checkbox" class="toggle" ng-model="todo.completed">
\t \t \t \t \t \t <label>{{todo.name}}</label>
\t \t \t \t \t \t <button class="destroy" ng-click="removeTodo($index)"></button>
\t \t \t \t \t </div>
\t \t \t \t </li>
\t \t \t </u1>
\t \t \t
\t \t </section>
\t \t <footer id="footer">
\t \t \t <pagination page="currentPage" total-items=2 items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
\t \t \t <span id="todo-count"><strong> {{ remain }} </strong> Todo(s) remaining
\t \t \t </span>
\t \t \t
\t \t </footer>
\t \t
\t </section>
\t </div>
<script src="js/app.js"></script>
<script src="js/MyTodoList.js"></script>
</body>
</html>
My bad I total-Elemente = 2 von insgesamt Posten = List.length zu ersetzen vergessen – user3187675