2016-06-12 12 views
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>

答えて

0

を削除された場合、リストが更新されていることにもなります。アイテムの数を取得するために見ることができる式を指定する必要があります。

完了していない場合にのみToDosを表示するようにしたかったかどうかはわかりませんでした。そうした場合、私はあなたのためにコードを修正することができます。

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)">Remove</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="list.length" 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>

+0

私の私が全項目で全項目= 2を置き換えることを忘れ悪い= list.length – user3187675

関連する問題