Angular js 学习总结

 

下面是关于Angular js 实现动态加载表格，根据输入框内容·搜索的例子

<script>
    var mainApp = angular.module("mainApp",[]);
    mainApp.controller("MyController",function($scope){

       $scope.childrenArry=[
           {name:"alice",age:20},
           {name:"柳林",age:20},
           {name:"john",age:23},
           {name:"mary",age:18},
           {name:"blue",age:25}
       ];


    });
</script>

<div ng-controller="MyController">
    <input type="text" ng-model="searchtext"/>
    <select name="" id="" ng-model="select" >
        <option value="name">姓名(升序)</option>
        <option value="-name">姓名(降序)</option>
        <option value="age" >年龄(升序)</option>
        <option  value="-age">年龄(降序)</option>
        <!--<option ng-click="select:'-age'" value="">年龄(降序)</option>-->
    </select>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr ng-repeat="ary in childrenArry | filter:searchtext |orderBy:select ">//过滤器的运用
            <td>{{ary.name}}</td>
            <td>{{ary.age}}</td>
        </tr>
    </table>
</div>

 ng-controller

要明确创建一个$scope 对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性：

<div ng-controller="MyController"> {{ person.name }} </div>  

ng-controller指令给所在的DOM元素创建了一个新的$scope 对象，并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里，这个外层DOM元素的$scope 对象，就是$rootScope 对象。这个scope链是这样的：

所有scope都遵循原型继承（prototypal inheritance），这意味着它们都能访问父scope们。对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父 scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到$rootScope 上。即如果controller是多层嵌套的，就会从最里面一直往外找，这个scope链是这样的：

唯一的例外：有些指令属性可以选择性地创建一个独立的scope，让这个scope不继承它的父scope们。

$scope的作用域

Angular只有div嵌套$scope才会有继承。一般而言$scope会先找自己的，揉自己没有才会向上找复原素直到找到为止。

$rootscope根作用域，是全局的。针对父元素，如果他找不会继续找父元素。

若父元素是一个对象，子元素没有对象，他会继承父元素的对象，子元素的更改会影响父元素的改变，因为他们都是指向同一个对象即同一个地址。