Still Moving

TodoMvc-Angular

主要功能：

1.任务列表展示

2.添加新任务

3.修改任务

4.删除任务

5.切换任务状态

6.显示未完成数量

7.显示已完成数量

8.清除已完成任务

9.切换不同状态下的任务显示

1.任务列表展示：

自己写假数据 通过ng-repeat展示 代码：

1
2
3
4
5
6
7
$scope.todos = [
  {id:1,name:'吃饭',completed:true},
  {id:2,name:'睡觉',completed:true},
  {id:3,name:'打豆豆',completed:false},
  {id:4,name:'学习',completed:true},
  {id:5,name:'喝水',completed:false}
];
1
2
3
4
5
6
7
8
<li ng-repeat="item in todos">
<div class="view">
    <input class="toggle" type="checkbox">
    <label>{{item.name}}</label>
    <button class="destroy"></button>
</div>
<input class="edit" value="Rule the web">
</li>

2.添加新任务:

按下回车之后 新写的任务会添加进 todos里面从而会展示在任务列表中 利用form 的ng-submit特性来完成 代码：

1
2
3
<form ng-submit="add()">
  <input ng-model="newTodo" class="new-todo"       placeholder="What needs to be done?" autofocus>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
$scope.newTodo='';
$scope.add = function(){
  if(!$scope.newTodo){
  return
  }
  $scope.todos.push({
  id:Math.random(),
  name:$scope.newTodo,
  completed:false
  })
  $scope.newTodo=''
}

3.修改任务：

双击（ng-dblclick）的时候，当前任务会变为文本框。 有两个标签一个为label标签另外一个是input标签，双击的时候input标签显示 正常的时候label标签显示 通过控制类名来达到效果（na-class）。修改完成之后 按下回车任务会重新显示在列表中 与功能 2 类似。双击的时候可以通过比较id值来判断是否是需要修改的数据 和控制样式。 

1
2
3
4
5
6
7
8
9
10
<li ng-repeat="item in todos" ng-class="{editing:isEditingId == item.id}"> 
  <div class="view">
      <input class="toggle" type="checkbox">
      <label ng-dblclick="edit(item.id)">{{item.name}}		       </label>
      <button class="destroy" ng-click="remove(item.id)">         </button>
  </div>
  <form ng-submit="save()">
      <input class="edit" value="Rule the web" ng-model="item.name">
  </form>
</li>
1
2
3
4
5
6
7
$scope.isEditingId = -1;
$scope.edit = function(id){
	$scope.isEditingId = id;
}
$scope.save = function(){
	$scope.isEditingId = -1;
}

4.删除任务：

点击x的时候 todos里的数据会减少相应的任务。 点击x之后传入id值 遍历todos来判断删除todos中的哪一项。

1
2
3
4
5
6
7
8
<li ng-repeat="item in todos">
  <div class="view">
      <input class="toggle" type="checkbox">
      <label>{{item.name}}</label>
      <button class="destroy" ng-click="remove(item.id)"></button>
  </div>
  <input class="edit" value="Rule the web">
</li>
1
2
3
4
5
6
7
8
9
$scope.remove = function(id){
  for (var i = 0; i < $scope.todos.length; i++) {
    var item = $scope.todos[i]
    if(item.id === id){
        $scope.todos.splice(i,1);
        return
    	}
	}
}

5.切换任务状态：

点击当前任务的时候 任务会变换状态 从已完成办成未完成 或者从未完成变为已完成。 input的ng-model值是 true或者false通过这个可以利用ng-class来给父元素添加类名得到样式。

1
2
3
4
5
6
7
8
9
10
<li ng-repeat="item in todos" ng-class="{editing:isEditingId == item.id,completed:item.completed}"> 
 <div class="view">
     <input class="toggle" type="checkbox" ng-         model="item.completed">
     <label ng-dblclick="edit(item.id)">{{item.name}}</label>
     <button class="destroy" ng-click="remove(item.id)"></button>
 </div>
 <form ng-submit="save()">
     <input class="edit" value="Rule the web" ng-model="item.name">
 </form>
</li>

5.1批量切换任务状态：

当点击最上面的checkbox的时候当前所有的任务都会变为已完成或者未完成 。checkbox的ng-model值为true或者false 通过这个来给input添加ng-change事件获取值来改变complated实现效果。

1
<input class="toggle-all" type="checkbox" ng-change="toggleAll()"ng-model="selectAll">
1
2
3
4
5
6
7
$scope.selectAll = false
$scope.toggleAll = function(){
  for (var i = 0; i < $scope.todos.length; i++) {
  var item = $scope.todos[i]
  item.completed = $scope.selectAll
  }
}

6.显示未完成数量

当一个表达式跟其他数据模型有关系的话 其他数据模型数据变化的时候表达式的值也会重新刷新。只需要遍历todos 计算出未完成的数量即可。

1
<span class="todo-count"><strong>{{getActive()}}</strong> item left</span>
1
2
3
4
5
6
7
8
9
10
$scope.getActive = function(){
  var count = 0
  for (var i = 0; i < $scope.todos.length; i++) {
      var item = $scope.todos[i]
      if(!item.completed){
          count++
      }
  }
  return count
}

7.显示已完成数量：

同6.

8.清除已完成任务

添加na-click点击事件 遍历todos删除不符合条件的数据

1
<button class="clear-completed" ng-click="clearAll()">Clear completed</button>
1
2
3
4
5
6
7
8
$scope.clearAll = function(){	
  for (var i = $scope.todos.length - 1; i >= 0; i--) {
    var item = $scope.todos[i];
    if(item.completed){
       $scope.todos.splice(i,1);
    }
  }
}

9.切换不同状态下的任务显示

点击全部显示全部任务，点击已完成显示已完成任务 点击未完成显示未完成任务。

通过$watch（监听数据模型）来监视锚点值的变化切换不同任务状态。

控制其中需要加入$location

1
myApp.controller('myController',['$scope','$location',function($scope,$location)
1
2
3
4
5
6
7
8
9
10
11
<ul class="filters">
    <li>
        <a ng-class="{selected:isCompleted.completed==undefined}" href="#/">All</a>
    </li>
    <li>
        <a ng-class="{selected:isCompleted.completed==false}" href="#/active" >Active</a>
    </li>
    <li>
        <a ng-class="{selected:isCompleted.completed==true}" href="#/completed">Completed</a>
    </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$scope.isCompleted = {};
	$scope.loca = $location;
    $scope.$watch('loca.url()',function(now, old){
      switch(now){
        case '/active':
        $scope.isCompleted = {completed:false};
        break;
        case '/completed':
        $scope.isCompleted = {completed:true};
        break;
        default:
        $scope.isCompleted = {};
      }
    })