<html ng-app>
<div id="myCarousel" class="carousel slide" ng-controller="CarouselCtrl">
<ol class="carousel-indicators">
<li class="pointer{{ pic.class }}" data-target="#myCarousel" data-slide-to="{{ $index }}" ng-repeat="pic in pictures"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item{{ pic.class }}" ng-repeat="pic in pictures">
<img src="{{ pic.img }}" alt />
<div class="carousel-caption">
<h4>{{ pic.title }}</h4>
<p>{{ pic.content }}</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/angular.min.js"></script>
function CarouselCtrl($scope) { $scope.pictures = []; $scope.pictures.push({class: ' active', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1ehxxxx513j20xh0p0tqm.jpg', title: '徐家汇公园长廊漫步', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'}); $scope.pictures.push({class: '', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1eh0xxxxoj20xh0p0qn4.jpg', title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'}); $scope.pictures.push({class: '', img: 'http://ww2.sinaimg.cn/mw690/51baa38egw1eh0rfxxxxdwj20xh0p0tog.jpg', title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'}); $scope.pictures.push({class: '', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1ehxxxxmsj20xh0p0h9x.jpg', title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'}); $scope.pictures.push({class: '', img: 'http://ww1.sinaimg.cn/mw690/51baa38egw1ehxxxxzcvj20xh0p0avz.jpg', title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'}); $scope.pictures.push({class: '', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1eh0xxxxwpwj20xh0p0gri.jpg', title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'}); $scope.pictures.push({class: '', img: 'http://ww2.sinaimg.cn/mw690/51baa38egxxxxditzozj21kw16hhdt.jpg', title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'}); }
其他实例:
<div ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<div>
<table>
<tr><th>row number</th></tr>
<tr ng-repeat="i in [1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
</table>