【AngularJS】Repeat方法；

最新推荐文章于 2024-01-11 20:23:03 发布

陶洲川

最新推荐文章于 2024-01-11 20:23:03 发布

阅读量813

点赞数

分类专栏：【基础】文章标签： Augular angularJS ng-repeat repeat 重复

本文链接：https://blog.csdn.net/River_Continent/article/details/72771136

版权

【基础】专栏收录该内容

229 篇文章 2 订阅

订阅专栏

repeat的方法可以将一个模块多次重复，而不设定死其中中的变量值；其基本的语法如下：

ng-repeat="x in names"

源代码：

<!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>
	<div ng-app="myApp" ng-controller="myCtrl">
	<ul>
		<li ng-repeat="x in names">{{x}}</li>
	</ul>	
	</div>	
	<script>
		var app=angular.module('myApp',[]);
		app.controller('myCtrl',function($scope){
			$scope.names=["小明","小红","二狗子"]
		});
	</script>	
	</body>
</html>

注意：
①红色区域为核心模块；

②var app=angular.module('myApp',[]);定义了app的具体名称；

③app.controller('myCtrl',function($scope){
$scope.names=["小明","小红","二狗子"]
});

app调用控制器（controller），所有的操作代码都是抽象代码，比如，她不会写app.myCtrl;这个是不好的，因为这样看起来比较乱。大家都是用app.controller()，然后括号内写具体的控制器名字和具体的方法。括号内都写得具体的东西，抽象的东西，思想上的东西，都在括号外；

截图：