Angularjs学习笔记《一》

　　开始慢慢的学习新的框架，Angularjs，其中原理不知深浅，但有例子练习，慢慢熟知。看的英文文档一点点翻译学习。

　　第一个例子，写一个增加，选中，删除的例子，

　　首先要引进所用的框架源码，这样引进，下面的例子用到了underscorejs：

<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/addEle.js"></script>

　上html代码：

 1 <body ng-app>
 2   <div ng-controller="addElement">
 3     
 4       <h3>共有多少项：{{getLen()}}</h3>
 5       <ul>
 6         <li ng-repeat="el in elents">
 7           <input type="checkbox" ng-model="el.done"> <span class="done-{{el.done}}">{{el.value}}</span>
 8         </li>
 9       </ul>
10 
11       <input type="text" ng-model="setValue" > 
12       <button ng-click="setValueFn(setValue)">add</button><br/>  
13 
14       <button ng-click="remove()">remove</button>
15   </div>
16 </body>

addEle.js文件代码：

 1 function addElement ($scope) {
 2 
 3     $scope.elents = [{      //定义数组，在页面中展示
 4 
 5         value:"add elements",
 6         done:false
 7 
 8     }];
 9 
10     $scope.getLen = function(){
11         return $scope.elents.length;   //计算数组中的长度，实时更新
12     };
13 
14     $scope.setValueFn = function(el){
15         console.log($scope.elents)
16         $scope.elents.push({value:el,done:false});    //添加项目
17         $scope.setValue = "";
18 
19     };
20 
21     $scope.remove = function(){
22         $scope.elents = _.filter($scope.elents,function(todo){
23             return !todo.done;                                  //将选中的过滤干掉
24         });
25     };
26 }

　　其中原理不大明白，跟着官网例子练习，再回头阅读其中的工作原理，慢慢熟知整个流程。