0
私は今、Todolistを持っていますが、私は隔週で私のTodolistを持っています: 10 todosに達したら次のページが2dnページになり、ページなど。私はドスの一つが唯一の本当の変化は、ページ付けにしたページ区切り角記号付きの語義者
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>
私の私が全項目で全項目= 2を置き換えることを忘れ悪い= list.length – user3187675