AngularJS

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <!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>

      

  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    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);
            });
        };
    }

      

posted on   架构师师  阅读(315)  评论(2编辑  收藏  举报

努力加载评论中...

导航

点击右上角即可分享
微信分享提示