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代码：

 <body ng-app>

   <div ng-controller="addElement">

       <h3>共有多少项：{{getLen()}}</h3>

       <ul>

         <li ng-repeat="el in elents">

           <input type="checkbox" ng-model="el.done"> <span class="done-{{el.done}}">{{el.value}}</span>

         </li>

       </ul>

       <input type="text" ng-model="setValue" >

       <button ng-click="setValueFn(setValue)">add</button><br/>  

       <button ng-click="remove()">remove</button>

   </div>

 </body>

addEle.js文件代码：

 function addElement ($scope) {

     $scope.elents = [{      //定义数组，在页面中展示

         value:"add elements",

         done:false

     }];

     $scope.getLen = function(){

         return $scope.elents.length;   //计算数组中的长度，实时更新

     };

     $scope.setValueFn = function(el){

         console.log($scope.elents)

         $scope.elents.push({value:el,done:false});    //添加项目

         $scope.setValue = "";

     };

     $scope.remove = function(){

         $scope.elents = _.filter($scope.elents,function(todo){

             return !todo.done;                                  //将选中的过滤干掉

         });

     };

 }

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

秒客网

Angularjs学习笔记《一》

相关文章