前端学习（1571）：angular实现todolist2添加

demo497.html

    
    
    



    

        

            
todos
        
        
        

            
            Mark all as complete
            

                

                    

                        
                        {
    {todo.text}}
                        
                    
                    
                
                
            
        

        

            {
    {todos.length}}item left
        
    
    
    
    

mvc.js

(function(angular) {
    'use strict';
    /* 应用程序主要的模块 */
    var myApp = angular.module('MyToDoMvc', []);
    //注册一个主要的控制器
    myApp.controller('MainController', ['$scope', function($scope) {
        //文本框模型
        $scope.text = '';
        //任务列表模型{id 1.text '学习' completed:trur}
        $scope.todos = [{
                id: 1,
                text: '学习',
                completed: false
            },
            {
                id: 2,
                text: '睡觉',
                completed: false
            },
            {
                id: 3,
                text: '打豆豆',
                completed: true
            }
        ];
        //添加元素
        $scope.add = function() {
            $scope.todos.push({
                id: $scope.todos.length + 1,
                text: $scope.text,
                completed: false
            });
            //清空文本数据
            $scope.text = '';
        }
    }])
})(angular);

运行结果