user3187675 user3187675 - 5 months ago 34
AngularJS Question

Todolist with pagination angularjs

I have now a Todolist but I want to have my Todolist with pagination :
when it reach 10 todos the next one will be on the 2dn page and then it will reach 20 the next one will on the 3rd page and so on. I would also that the list is updated when one of the todos is deleted



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>




Answer

The only real change was to pagination. You need to supply an expression that it can watch to get the number of items.

I wasn't sure if you only wanted to only display ToDos if they aren't completed or not. If you do, I can modify the code to do that for you.

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>

Comments