Skip to content

Instantly share code, notes, and snippets.

@lalabear

lalabear/controllers.js

Created July 19, 2012 14:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lalabear/3144505 to your computer and use it in GitHub Desktop.
Save lalabear/3144505 to your computer and use it in GitHub Desktop.
Download ZIP
邊學AngularJS邊做Todo List第三回
Raw
controllers.js
function TodoCrtl($scope) {
$scope.newItem = '';
$scope.todoList = [];
$scope.addItem = function(){
if(this.newItem){
this.todoList.push({label:this.newItem});
this.newItem = '';
}
}
}
function TodoCrtlRemovable($scope) {
$scope.newItem = '';
$scope.todoList = [];
$scope.addItem = function(){
if(this.newItem){
this.todoList.push({label:this.newItem,isFinish:false});
this.newItem = '';
}
}
$scope.removeItem = function(item){
item.isFinish = true;
}
}
Raw
todoWithRemove.html
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>邊學AngularJS邊做Todo List (3)</title>
<script type="text/javascript" src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</head>
<body ng-controller="TodoCrtlRemovable">
<h1>Todo List</h1>
<form ng-submit="addItem()">
<input type="text" ng-model="newItem" name="newItem" />
<input type="submit" id="submit" value="新增待辦事項" />
</form>
<ul id="todo">
<li ng-repeat="item in todoList | filter:{isFinish:false}">
<input type="checkbox" ng-click="removeItem(item)">
{{item.label }}
</li>
</ul>
<hr>
<h1>Finished!</h1>
<ul id="finish">
<li ng-repeat="item in todoList | filter:{isFinish:true}">
{{item.label}}
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment