AngularJS结合Bootstrap实现TODO List教程

(function(window){
 // 注册一个应用程序主模块
 var todoapp = window.angular.module('todoapp',[]);
 // 注册控制器
 // window.angular.module('todoapp')
 todoapp.controller('maincontroller'
  ,['$scope',function($scope){
   // $scope 作用就是往视图中添加元素
   // 文本框中的数值
   $scope.text = ''; // 会使用双向绑定的数据类型

   // 为方便页面展示，手动添加一串列表
   $scope.todolist = [{
    text:'Angularjs',
    done:false
   },{
    text:'Bootstrap',
    done:false
   }];

   // 添加函数，响应交互
   $scope.add = function(){
    var text = $scope.text.trim();
    if(text) {
     $scope.todolist.push({
      text:text,
      done:false
     });
     $scope.text = '';
    }
   }

   // 点击删除按钮的响应事件
   $scope.delete = function(todo){
    var index = $scope.todolist.indexOf(todo)
    $scope.todolist.splice(index,1);// 起删除的作用
   }


   // 获取已完成的事件的个数，按照checkbox的选择与否实现
   // 由于页面是动态变化的，所以要使用函数，或者干脆使用模型绑定，但是那样的话会稍微麻烦一点
   $scope.doneCount = function(){
    // 使用filter来实现
    var temp = $scope.todolist.filter(function(item){
     return item.done;// 返回true表示当前的数据满足条件，事件已完成
    });
    return temp.length;
   }
 }]);

})(window)

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Angularjs 整合Bootstrap实现任务清单</title>
 <!-- 引入 Bootstrap -->
 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
 <style>
  .container {
   max-width: 720px;
  }
  .done {
   color: #cca;
  }
  .checkbox {
   margin-right: 12px;
   margin-bottom: 0;
  }
  .done > .checkbox > label > span {
   text-decoration: line-through;
  }
 </style>
 <script src="node_modules/angular/angular.js"></script>
 <script src="myjs/app.js"></script>
</head>
<body >
 <div class="container" ng-app="todoapp">
  <header>
   <h1 class="display-3">TODO LIST</h1>
   <hr></header>
  <!-- 内容部分-->
  <section ng-controller="maincontroller">
   <!--为了实现好看的界面，所以用了表单控制-->
   <form class="input-group input-group-lg">
    <input type="text" class="form-control" ng-model="text" name="">
    <span class="input-group-btn">
     <button class="btn btn-secondary" ng-click="add()">Add</button>
    </span>
   </form>
   <ul class="list-group" style="padding:12px;">
    <li class="list-group-item" ng-class="{'done':item.done}" ng-repeat="item in todolist" >
    <button type="button" class="close" aria-label="close" ng-click="delete(item)">
     <span aria-hidden="true">&times;</span>
     <span class="sr-only">Close</span>
    </button>
     <div class="checkbox">
      <label>
       <input type="checkbox" ng-model="item.done">
       <span>{{item.text }}</span>
      </label>
     </div>
    </li>
   </ul>
   <p>
    总共 <strong>{{todolist.length }}</strong>
    个任务，已完成 <strong>{{doneCount()}}</strong>
    个
   </p>
  </section>
 </div>

</body>
</html>

(function(window){
 // to do something
})(window)

todoapp.controller('maincontroller'
 // 这里的$scope也就起到了容器的作用，声明了变量的可见范围。
  ,['$scope',function($scope){
   // $scope 作用就是往视图中添加元素
   // 文本框中的数值
   $scope.text = ''; // 会使用双向绑定的数据类型

   // 为方便页面展示，手动添加一串列表
   $scope.todolist = [{
    text:'Angularjs',
    done:false
   },{
    text:'Bootstrap',
    done:false
   }];


 }]);

// 添加函数，响应交互
   $scope.add = function(){
    var text = $scope.text.trim();
    if(text) {
     $scope.todolist.push({
      text:text,
      done:false
     });
     $scope.text = '';
    }
   }

   // 点击删除按钮的响应事件
   $scope.delete = function(todo){
    var index = $scope.todolist.indexOf(todo)
    $scope.todolist.splice(index,1);// 起删除的作用
   }


   // 获取已完成的事件的个数，按照checkbox的选择与否实现
   // 由于页面是动态变化的，所以要使用函数，或者干脆使用模型绑定，但是那样的话会稍微麻烦一点
   $scope.doneCount = function(){
    // 使用filter来实现
    var temp = $scope.todolist.filter(function(item){
     return item.done;// 返回true表示当前的数据满足条件，事件已完成
    });
    return temp.length;
   }