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根作用域，是全局的。针对父元素，如果他找不会继续找父元素。

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