Skip to content

Instantly share code, notes, and snippets.

@hrgui

hrgui/checkAllDemo.html

Last active August 29, 2015 14:02
Show Gist options
  • Save hrgui/68a6c04604b1875921ee to your computer and use it in GitHub Desktop.
Save hrgui/68a6c04604b1875921ee to your computer and use it in GitHub Desktop.
Download ZIP
This demonstrates and is the implementation of a simple check all use case in angular.js. I got the idea from http://plnkr.co/edit/IQA9kq?p=preview, but I did not want to have to depend on underscore, so it is a solution without it.
Raw
checkAllDemo.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="todoApp">
<div ng-controller="TodoCtrl as todoList">
Select All <input type="checkbox" ng-checked="todoList.isCheckedAll()" ng-click="todoList.checkAll()" />
<ul ng-repeat="todo in todoList.todos">
<li>{{todo.task}} <input type="checkbox" ng-model="todo.isDone" /></li>
</ul>
</div>
</body>
</html>
Raw
checkAllDemo.js
var app = angular.module('todoApp', []);
app.controller('TodoCtrl', [function TodoCtrl() {
this.todos = [{task:"Open a store.", isDone: false}, {task:"Open another store.", isDone: false}, {task:"Open another store.", isDone: false}];
this.isCheckedAll = function() {
var numChecked = 0;
this.todos.map(function(todo) {
if(todo.isDone) {
numChecked++;
}
});
return numChecked == this.todos.length;
};
this.checkAll = function() {
var checkState = !this.isCheckedAll();
this.todos.map(function(todo) {
todo.isDone = checkState;
});
};
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment