我现在有一个Todolist，但我希望我的Todolist有分页： 当它达到10 todos时，下一个将在2dn页面上，然后它将达到20，下一个将在第3页面上，依此类推。我还希望在删除其中一个待办事项时更新列表
var app = angular.module("myapp", ['ui.bootstrap']);
app.controller('TodoCtrl', ['$scope', '$filter', function ($scope, $filter)
{
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.maxSize = 5;
$scope.list = [];
//thrid argument if we watch the list all the times
$scope.$watch('list', function()
{
$scope.remain = $filter('filter')($scope.list, {completed:false}).length;
}, true)
$scope.removeTodo = function(index)
{
//delete on element from index
$scope.list.splice(index, 1);
}
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.addTodo = function()
{
if ($scope.newTodo != '')
{
$scope.list.push(
{
// model newTodo
name : $scope.newTodo,
completed : false
})
}
else
alert("Message can not be empty !")
//to empty task
$scope.newTodo = '';
}
}]);<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5
/angular.min.js"></script>
<link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<div ng-app="myapp">
<section id = "todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form" ng-submit="addTodo()">
<input type="text" id="new-todo" placeholder="New todo" autofocus autocomplete="off" ng-model="newTodo">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li ng-repeat="todo in list.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))" ng-class="{completed: todo.completed}">
<div class="view">
<input type="checkbox" class="toggle" ng-model="todo.completed">
<label>{{todo.name}}</label>
<button class="destroy" ng-click="removeTodo($index)"></button>
</div>
</li>
</u1>
</section>
<footer id="footer">
<pagination page="currentPage" total-items=2 items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
<span id="todo-count"><strong> {{ remain }} </strong> Todo(s) remaining
</span>
</footer>
</section>
</div>
<script src="js/app.js"></script>
<script src="js/MyTodoList.js"></script>
</body>
</html>
答案 0 :(得分：0)
唯一真正的变化是分页。您需要提供一个可以观察的表达式来获取项目数。
我不确定你是否只想显示ToDos，如果它们没有完成。如果你这样做，我可以修改代码来为你做这件事。
var app = angular.module("myapp", ['ui.bootstrap']);
app.controller('TodoCtrl', ['$scope', '$filter', function ($scope, $filter)
{
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.maxSize = 5;
$scope.list = [];
//thrid argument if we watch the list all the times
$scope.$watch('list', function()
{
$scope.remain = $filter('filter')($scope.list, {completed:false}).length;
}, true)
$scope.removeTodo = function(index)
{
//delete on element from index
$scope.list.splice(index, 1);
}
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.addTodo = function()
{
if ($scope.newTodo != '')
{
$scope.list.push(
{
// model newTodo
name : $scope.newTodo,
completed : false
})
}
else
alert("Message can not be empty !")
//to empty task
$scope.newTodo = '';
}
}]);<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5
/angular.min.js"></script>
<link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<div ng-app="myapp">
<section id = "todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form" ng-submit="addTodo()">
<input type="text" id="new-todo" placeholder="New todo" autofocus autocomplete="off" ng-model="newTodo">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li ng-repeat="todo in list.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))" ng-class="{completed: todo.completed}">
<div class="view">
<input type="checkbox" class="toggle" ng-model="todo.completed">
<label>{{todo.name}}</label>
<button class="destroy" ng-click="removeTodo($index)">Remove</button>
</div>
</li>
</u1>
</section>
<footer id="footer">
<pagination page="currentPage" total-items="list.length" items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
<span id="todo-count"><strong> {{ remain }} </strong> Todo(s) remaining
</span>
</footer>
</section>
</div>
<script src="js/app.js"></script>
<script src="js/MyTodoList.js"></script>
</body>
</html>