angularJs中ng-repeat的使用
一、ng-repeat常规使用: ng-repeat="每次循环的循环项 in 数据" 循环数据 生成DOM
示例：循环数组和对象，生成相应dom节点
<body ng-app="myApp" ng-controller="demoCtrl">
<ul>
<!-- 1.遍历数组 -->
<li ng-repeat="item in arr">{{item}}</li>
</ul>
<p>{{ obj.a }}</p>
<!-- 2.遍历对象只能取到属性值 -->
<div ng-repeat="item in obj">{{item}}</div>
<!-- 3.遍历对象，同时输出键值对形式 -->
<div ng-repeat="(key,value) in obj">{{key}}==>{{value}}</div>
<!-- 4.遍历常见的json数据 -->
<div ng-repeat="person in persons">{{person.name}}</div>
<!-- 5.遍历嵌套数组 -->
<div ng-repeat="person in persons">
{{person.name}}
<span ng-repeat="item in person.hobby"> {{item}}</span>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module('myApp',[])
.controller('demoCtrl',['$scope',function($scope){
$scope.arr = [1,2,3,4];
$scope.obj = {
a:1,b:2
}
$scope.persons = [
{
name:'张三',hobby:['敲代码','睡觉']
},{
name:'李四',hobby:['篮球','乒乓球']
},{
name:'王五',hobby:['吃饭','睡觉','打豆豆']
}
]
}])
</script>
</body>
二、ng-repeat中的常见属性
- ng-repeat="每次循环的循环项 in 数据" 循环数据 生成DOM
- $index 当前循环的索引
- $first 当前循环是否是第一次循环
- $last 当前循环是否是最后一次循环(返回boolean值)
- $middle 当前循环是否是中间项 除了第一项 和 最后一项 都是中间项
- $even 是否是偶数项
- $odd 是否是奇数项
示例代码：
<ul>
<!-- 当一次循环的时候添加一个active类 导航中样式常用 -->
<li ng-repeat="item in arr" class="{{$first ? 'active':' '}}">{{item}}
<p>索引:{{$index}}</p>
<p>是都是最后一次循环:{{$last}}</p>
<p>是否时中间项:{{$middle}}</p>
<p>是否时偶数项:{{$even}}</p>
<p>是否时奇数项:{{$odd}}</p>
</li>
</ul>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module('myApp',function($scope){
$scope.arr=[1,4,5];
}])
</script>
三、ng-repeat中不允许重复值的解决办法
- 在循环当中 是不允许有重复项 使用 track by $index 解决这个问题(可以使用重复项)
<body ng-app="myApp" ng-controller="demoCtrl"> <!-- 在循环当中 是不允许有重复项 使用 track by $index 解决这个问题(可以使用重复项) --> <ul> <li ng-repeat="item in arr track by $index"> {{item}} </li> </ul> <script src="node_modules/angular/angular.js"></script> <script> angular.module('myApp',function($scope){ <!-- 具有重复项a --> $scope.arr = ["a","b","c","a"]; }]) </script>
