初入angularJS [1]-优快云博客

本文介绍如何使用AngularJS、HTML、CSS和JavaScript构建一个待办事项应用，包括前端UI实现、后端逻辑处理以及数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<!doctype html>
<html ng-app>
<head>
    <link  rel="stylesheet" href="todo.css" />
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="./angular-1.0.1.min.js"></script>
    <script src="./todo.js"></script>

</head>
<body>

<div ng-controller="TodoCtrl">
    <h2>Total todos:{{getTotalTodos()}} </h2>
    <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 class="form-horizontal">
        <input type="text" ng-model="formTodoText" ng-model-instant />
        <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add </button>
    </form>
</div>
</body>
</html>

View Code

css

1 .done-true{
2    text-decoration: line-through;
3    color: gray;
4 }

View Code

 1 function TodoCtrl($scope){
 2     $scope.totalTodos=4;
 3 
 4     $scope.todos=[
 5         {text:"Learn AngularJS",done:false},
 6         {text:"Build an app",done:false}
 7     ];
 8 
 9     $scope.getTotalTodos=function(){
10         return $scope.todos.length;
11     };
12 
13 
14     $scope.addTodo=function(){
15         $scope.todos.push({text:$scope.formTodoText,done:false});
16         $scope.formTodoText="";
17     };
18 }