Skip to content

Instantly share code, notes, and snippets.

@lalabear
Created July 21, 2012 01:52
Show Gist options
  • Save lalabear/3154223 to your computer and use it in GitHub Desktop.
Save lalabear/3154223 to your computer and use it in GitHub Desktop.
邊學AngularJS邊做Todo List第四回
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;
}
}
function TodoCrtlUpdate($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;
}
$scope.edit = function(item){
item.editing = true;
}
$scope.save = function(item){
delete item.editing;
}
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>邊學AngularJS邊做Todo List (4)</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</head>
<body ng-controller="TodoCrtlUpdate">
<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}">
<div ng-hide="item.editing"><input type="checkbox" ng-click="removeItem(item)"><span ng-dblclick="edit(item)">{{item.label }}</span></div>
<div ng-show="item.editing"><input type="text" value="{{item.label }}" ng-model="item.label"><button ng-click="save(item)">儲存</button></div>
</li>
</ul>
<hr>
<h1>Finished!</h1>
<ul id="finish">
<li ng-repeat="item in todoList | filter:{isFinish:true}">
{{item.label}}
</li>
</ul>
</body>
</html>
@ZoomQuiet
Copy link

惊梦哪!!!

$scope.save = function(item){
delete item.editing;
}

山河表里,千秋志!

angularjs 终于統一了这种表述!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment