ng-repeat
ng-repeat:遍历数组
1. 用法:ng-repeat=”item in array”
这是ng-repeat自己的语法,item:数据中的每一项;array:要遍历的数组
item和array都可以根据实际情况来改的
2. ng-repeat都做了什么??
a. 为数组中的每一项建立一个作用域,并把需要的值放到这个作用域上
(现在就有了一组子作用域)
b. 获取模板,并把每一作用域和模板做一次绑定,获得一个html元素,
(现在就有了绑定过作用域的html元素)
html结构
- ng-repeat: 根据数组中的每一项重复生成模板中的内容, 模板中填坑时用到的数据就是数组中的每一项
- user代表data中的每一项,只有在ng-repeat这个指令中可以使用
在这里就是数组中的每一个对象(这里是对象哦,所以要user.name)
<table>
//ng-class-even={col:true}也表示索引为偶数的列改变
<tr ng-repeat="item in data" ng-class={"col":$even}>
<td>{{item.name}}</td>
<td>{{item.gender}}</td>
<td>{{item.age}}</td>
<td>{{$odd}}</td>
<td>{{$even}}</td>
</tr>
</table>
js代码
var app = angular.module("s9.app",[]);
app.run(function($rootScope){
$rootScope.data = [
{name:"张三",gender: "男",age: 10},
{name:"李四",gender: "男",age: 20},
{name:"王五",gender: "女",age: 30},
]
})
ng-controller
ng-controller 不是一个控制器,而是一个指令,作用:
1. 创建了一个空的作用域
2. 获取用app.controller函数在模块上创建的控制器
3. 有空的作用域,有控制器函数,用控制器初始化空作用域,往作用域上存放数据就有了一个有数据的作用域
4. 把作用域绑定到html标签上
html结构
<div ng-app="s9.app">
<div ng-controller="MainController">
<span ng-bind="name"></span><br>
<input type="text" ng-model="name">
</div><br><br>
<!--上下是两个作用域,互不影响-->
<div ng-controller="MainController">
<span ng-bind="name"></span><br>
<input type="text" ng-model="name">
</div>
</div>
js代码
var app = angular.module("s9.app",[]);
app.controller("MainController",function($scope){
$scope["name"] = "I'm Main Controller Name";
})
ng-controller作用域嵌套
<div ng-app="s9.app">
<div>
<span>{{name}}</span>
<span>{{root}}</span>
</div>
<!--如果当前作用域中没有,就会去它的原型中寻找-->
<div ng-controller="MainController">
<span>{{name}}</span>
<span>{{main}}</span>
</div><br><br>
<div ng-controller="SubController">
<span>{{name}}</span>
<span>{{sub}}</span>
</div><br><br>
</div>
js代码
var app = angular.module("s9.app",[]);
app.run(function($rootScope){
$rootScope["name"] = "root";
$rootScope["root"] = "from root";
});
app.controller("MainController",function($scope){
$scope["name"] = 'main';
$scope['main'] = 'from main';
});
app.controller("SubController",function($scope){
$scope['name'] = 'sub';
$scope['sub'] = 'from sub';
})
一个容易搞混的小问题
改变上面的input的输入内容,下面的input中的内容会给变,但是改变下面的输入内容,上面的就没有变化
html结构
<div ng-controller="MainController">
<input type="text" ng-model="name"><br><br>
<div ng-controller="SubController">
<input type="text" ng-model="name">
</div>
</div>
js代码
var app = angular.module("s9.app",[]);
app.controller("MainController",function($scope){
$scope["name"] = "hello world";
})
app.controller("SubController",function($scope){
$scope["sub"] = "haha";
});
解析:
- SubController作用域包裹在MainController作用域中,所以SubController继承了父作用域中的属性和方法
- SubController作用域中没有name属性,所以访问的是原型中的name
原型中的name改变时,下面的input的value就会改变,但是
下面的input的value改变时,改变的是自己的,不会影响它的原型
怎样解决这个小问题呢
将要绑定的内容作为对象的属性或方法存在
html
<div ng-controller="MainController">
<input type="text" ng-model="data.name"><br><br>
// 现在都属于同一个对象的属性了
<div ng-controller="SubController">
<input type="text" ng-model="data.name">
</div>
</div>
js代码
var app = angular.module("s9.app",[]);
app.controller("MainController",function($scope){
// 通过对象的属性绑定
$scope["data"] = {
name: "hello world"
}
})
app.controller("SubController",function($scope){
$scope["sub"] = "haha";
})