AngularJS
-
1234567891011121314151617181920212223242526272829303132
<!
doctype
html>
<
html
ng-app>
<
head
>
<
script
src="js/angular1.2.0.js"></
script
>
<
script
src="js/todo.js"></
script
>
<
link
rel="stylesheet" href="css/todo.css"/>
</
head
>
<
body
>
<
h2
>Todo</
h2
>
<!-- ng-controller 对应的是后台的一个同名js函数-->
<
div
ng-controller="TodoCtrl">
<!-- remaining 对应的是后台 controller 里的一个同名js函数;
todos 对应的是后台 controller里的一个同名的js数组-->
<
span
>{{remaining()}} of {{todos.length}} remaining</
span
>
[<
a
href="" ng-click="archive()">archive</
a
>]
<
ul
class="unstyled">
<!-- ng-repeat 用来说明循环遍历js数组,todo是新定义的遍历游标 -->
<
li
ng-repeat="todo in todos">
<!-- ng-model 用来双向绑定 json 里的 done 键对应的值 -->
<
input
type="checkbox" ng-model="todo.done"/>
<!-- {{}} 只读绑定 -->
<
span
class="done-{{todo.done}}">{{todo.text}}</
span
>
</
li
>
</
ul
>
<!-- ng-submit 用来绑定后台 controller 里的js函数 -->
<
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
>
-
123456789101112131415161718192021222324252627
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);
});
};
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步