您的位置：首页 > Web前端 > AngularJS

angularJS-1:ng-repeat用法

2017-04-11 11:31 525 查看

直接撸代码：

列表的增加，删除操作，采用angular 的ng-repeat循环输出列表项

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-repeat directive</title>
</head>
<body>
<table ng-controller="CartController">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>居住地</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in items">
<td>{{$index + 1}}</td>
<td><input ng-model="item.name"></td>
<td>{{item.age}}</td>
<td><input ng-model="item.addres"></td>
<td>
<button ng-click="remove($index)">Remove</button>
<button ng-click="add()">add</button>
</td>
</tr>
</table>

<script src="angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{name: "张三", addres: '西安', age: 19},
{name: "李四", addres: '北京', age: 13},
{name: "王五", addres: '成都', age: 28}
];

$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
$scope.add = function (){
$scope.items.push({name:'hhhhaaaa',addres:'11111',age:18});
}
}
</script>
</body>
</html>

ng-repeat指令需要循环内容的元素上，items和控制器上的变量名对应，item是为数组中单个对象起的别名。$index可以返回当前引用对象的序号，从0开始，用于告诉你当前元素是否是集合中的第几个元素。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular

相关文章推荐

新的分享

章节导航