开始慢慢的学习新的框架，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 }
其中原理不大明白，跟着官网例子练习，再回头阅读其中的工作原理，慢慢熟知整个流程。