angularjs中 ng-repeat详解

最新推荐文章于 2024-07-28 20:27:10 发布

weixin_34389926

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量921

点赞数

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/shuaihong/blog/1542145

版权

2019独角兽企业重金招聘Python工程师标准>>>

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',[])

			.controller('demoCtrl',['$scope',function($scope){

        $scope.arr=[1,2,3,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',[])

			.controller('demoCtrl',['$scope',function($scope){
        <!-- 具有重复项a -->
				$scope.arr = ["a","b","c","a"];

			}])
	</script>

转载于:https://my.oschina.net/shuaihong/blog/1542145