使用ng repeat创建多个div



我想用文本创建'n'个红色块(这里的n表示数组中元素的数量(。但是,我收到了一张空白页。

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.card-main {
width: 100px;
height: 100px;
border: 1px solid red;
background-color: red;
}
</style>
<!-- look here start --> 
<div class="card-main" ng-app="myApp" ng-controller="myCtrl" ng-repeat="x in type">
<p>{{x}}</p> 
</div>
<!-- look here end -->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.type = ["Any", "T1", "T2", "T3"];
$scope.state = ["Any", "S1", "S2"];
});
</script>
</body>
</html>

ng-repeat具有非常高的优先级,它在ng-controller之前应用,例如

<div ng-repeat="..." ng-controller="..."

将呈现具有多个控制器实例的多个div,而不是在一个控制器内呈现多个div。

要开始,只需将ng应用程序、ng控制器和ng重复放在不同的元素上:

<div ng-app ...
<div ng-controller ...
<div ng-repeat ...

最新更新