AngularJS中的ng-repeat迭代数组


后端

零度逍遥

2015-08-20 02:00:33

先来粘贴代码:


<html>
<head>
    <script src="//cdn.bootcss.com/angular.js/1.3.17/angular.js"></script>
    <script type="text/javascript">
    angular.module('app',[]).controller('HelloCtrl',function ($scope) {
            $scope.groupName = '天籁乐队';
            $scope.list = [
                {name:'小王', age:16},
                {name:'小李', age:18}
            ];
        })
    </script>
</head>
<body ng-app = 'app'>
<div ng-controller="HelloCtrl">
    <h2>今天介绍的团队是: {{groupName}}</h2>
    <div>主要成员是: 
    	<p ng-repeat="v in list">{{v.name}},年龄:{{v.age}}</p>
	</div>
</div>
</body>
</html>
效果图如下:


ng-repeat是循环方法,可以把数组里的元素循环展示在页面上。