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

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

原文地址:https://www.cnblogs.com/alicezq/p/4984544.html