AngularJS 控制代码详解
来源：luqidong
发布时间：2013-12-12 19:59:41
点击数：
-
<!doctype html>
-
<html
ng-app> //添加对整个html的控制权
-
<head>
-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/
angular.min.js"></script>//加载angular
-
<script src="
todo.js"></script>//加载控制代码
-
<link rel="stylesheet" href="todo.css">
-
</head>
-
<body>
-
<h2>Todo</h2>
-
<div
ng-controller="TodoCtrl">//用TodCtrl控制这个层里面的内容
-
<span>
{{remaining()}} of {{todos.length}} remaining</span>//remaining是返回的变量
-
[ <a href=""
ng-click="archive()">archive</a> ]//单击的时候触发的方法
-
<ul class="unstyled">
-
<li
ng-repeat="todo in todos">//让li重复填充
-
<input type="checkbox"
ng-model="todo.done">//要控制的checkbox
-
<span class="done-
{{todo.done}}">{{todo.text}}</span>//todo.done是返回的变量
-
</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>
-
</body>
-
</html>
todo.js部分代码
-
function
TodoCtrl($scope) {//TodoCtrl方法
-
$scope.
todos = [ //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() { //判断checkbox选中的个数
-
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);
-
});
-
};
-
}