這次介紹官網第二個範例，Add Some Control，所展示的是 AngularJS Controller的用法，
主題是常見的 ToDo List。
一樣先看一下結果：
新增一個待辦事項：debug
按下 archive，將已完成的事項刪除
將 build an angular app 標註為已完成
看完了成果，接著來看程式碼：
html
<!doctype html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="js/todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="http://angularjs.org/css/docs.css">
<link rel="stylesheet" href="css/todo.css">
</head>
<body>
<div class="tabs-spacer"></div>
<div class="span4 well">
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</div>
</body>
</html>
除了第 8 行新加了 todo.js 之外，其它在第一個範例都介紹過了，todo.js 等等會說明
17 行宣告了 ng-controller，宣告了 Controller 的範圍及此 Ctrl 的名稱為 TodoCtrl
18 行宣告一個 {{remaining()}}，會顯示 remaining 這個函式的回傳值。 {{todos.length}} 則會顯示 todos 這個陣列有多少個項目
19 行 ng-click="archive()"，所以 archive 這個連結被 click 時，會呼叫 archive 函式。
21 行 ng-repeat="todo in todos"，ng-repeat 就像 for each，會依據 todos 這個 Array 有多少個項目而重覆多少次 (這個例子來說，會重覆 <li> 到 </li>之間的內容)。同時，宣告 todos 陣列取出來項目叫 todo，供 li 裡面使用。
22 行 ng-model="todo.done"，把這個 input 的值跟 todo.done 綁定了
23 行 {{todo.done}} 用來決定這個 span 的 class 名稱是 "done-true" 或 "done-false"，目的是搭配 css 來作顯示風格上的變化，以這個例子來說，就是灰色字體及刪除線。後面的{{todo.text}} 會顯示 todo.text 的內容。
26 行 ng-submit="addTodo()"，當這個 form submit 時，會呼叫 addTodo 函式。
27 行同樣是 ng-model 的資料綁定
28 行就是 submit 按鈕
todo.js
function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
$scope.archive = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};
}
3~5 行初始化 todos，有兩個項目
7~10 行宣告 addTodo 是一個函式，會將 todoText 當成新項目的內容，並新增到 todos 裡，同時會清空 todoText。
12~18 行宣告 remaining 函式，計算 todos 裡面有多少個項目的 done 屬性是 ture。
20~26 行宣告 archive 函式，將 todos 裡項目的 done 是 false 的保留。(也就是清除 done 是 true 的項目)
DEMO 網頁
參考來源：
angularjs.org
http://angularjs.org/
沒有留言:
張貼留言