angularjs 初体验 循环

<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/51baa38egw1eh0rgce513j20xh0p0tqm.jpg', 
							  title: '徐家汇公园长廊漫步', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1eh0rfzyu7oj20xh0p0qn4.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww2.sinaimg.cn/mw690/51baa38egw1eh0rfw76dwj20xh0p0tog.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1eh0rf0simsj20xh0p0h9x.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww1.sinaimg.cn/mw690/51baa38egw1eh0reydzcvj20xh0p0avz.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1eh0rewdwpwj20xh0p0gri.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花,红艳艳的桃花,还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww2.sinaimg.cn/mw690/51baa38egw1efbpditzozj21kw16hhdt.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>

你可能感兴趣的:(学习永无止境,每天进步一点点,AngularJS,纵观千象)