angularjs 初体验循环

最新推荐文章于 2020-09-01 00:05:26 发布

iteye_13003

最新推荐文章于 2020-09-01 00:05:26 发布

阅读量138

点赞数

分类专栏： js 文章标签：乔乐共享纵观千象每天进步一点点学习永无止境 angularjs

本文链接：https://blog.csdn.net/iteye_13003/article/details/82601384

版权

js 专栏收录该内容

123 篇文章 1 订阅

订阅专栏

<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">&lsaquo;</a>
		  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
	}

其他实例：

<p>使用 ng-repeat 来循环数组</p>

<ul>

</li>

</ul>

<div>

<table>

<tr><th>row number</th></tr>

</table>

iteye_13003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs 初体验循环

&lt;html ng-app&gt;&lt;div id="myCarousel" class="carousel slide" ng-controller="CarouselCtrl"&gt; &lt;ol class="carousel-indicators"&gt; &lt;li class="pointer{{ pic.
复制链接

扫一扫