angularjs中 ng-repeat详解
发布时间：2020-12-17 08:45:31 所属栏目：安全 来源：网络整理
导读：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}
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中的常见属性
示例代码： <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中不允许重复值的解决办法
<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> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |