前端之家收集整理的这篇文章主要介绍了
angularjs之ng-repate，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="kongwc">
<div ng-controller="myCtrl">
<!--$first 第一条 $middle中间几条 $last最后一条 -->
<ul>
<li ng-repeat="(k,stu) in students">
<span ng-if="$first" style="{{$first?'color:lightgreen':''}}">姓名:{{stu.name}} 性别:{{stu.value}}</span>
<span ng-if="$middle" style="{{$middle?'color:lightblue':''}}">姓名:{{stu.name}} 性别:{{stu.value}}</span>
<span ng-if="$last" style="{{$last?'color:gray':''}}">姓名:{{stu.name}} 性别:{{stu.value}}</span>
</li>
</ul>
<hr/>
<!--$even 偶数条 $odd 奇数-->
<ul>
<li ng-repeat="(k,stu) in students">
<span style="{{$odd?'color:lightgreen':'color:lightblue'}}">姓名:{{stu.name}} 性别:{{stu.value}}</span>
</li>
</ul>
<hr/>
<ul>
<!--若repeatData中有重复数据时，要用track by $index 否则不会显示出来-->
<li ng-repeat="(k,data) in repeatData track by $index">
<span style="{{$odd?'color:lightgreen':'color:lightblue'}}">{{data}}</span>
</li>
</ul>
</div>
<script>
var app = angular.module("kongwc",[]);
app.controller("myCtrl",function ($scope) {
$scope.students = [
{name:'小白牛',value :'男'},{name:'迷迭香',value:'女'},{name:'末日使者',value:'男'},{name:'黑暗游侠',value:'女'}
];
$scope.repeatData = ['小白牛','迷迭香','小白牛'];
});
</script>
</body>
</html>
注：本文参考后盾angularjs教学视频
原文链接：https://www.f2er.com/angularjs/147064.html
