我有一个这样的对象:
$scope.cars=[
{'element':'Ford','count':3},
{'element':'Honda','count':2},
{'element':'Ferrari','count':1},
{'element':'Delorean','count':6}
];
我想要实现的是重复每个元素n次,其中n由其属性count
定义
我已经实现了这个
<li ng-repeat="car in cars">
<p2 ng-if="car.count >0">{{car.element}}</p2>
<p2 ng-if="car.count >1">{{car.element}}</p2>
<p2 ng-if="car.count >2">{{car.element}}</p2>
<p2 ng-if="car.count >3">{{car.element}}</p2>
<p2 ng-if="car.count >4">{{car.element}}</p2>
<p2 ng-if="car.count >5">{{car.element}}</p2>
<p2 ng-if="car.count >6">{{car.element}}</p2>
</li>
但我想知道是否有可能在Angular中做一般情况(所以我可以应用它,即使我不知道哪个号码会出现在car.count
)
您可以提前核对the plunkr here!
答案 0 :(得分:2)
您可以使用嵌套的ng-repeat
指令和一个创建特定长度的新数组的函数来实现您想要的结果。
<li ng-repeat="car in cars">
<p2 ng-repeat="t in arrayOfLength(car.count) track by $index">{{car.element}} </p2>
</li>
控制器
$scope.arrayOfLength = function(num){
return new Array(num);
}
工作Plunkr
答案 1 :(得分:2)
这是一种简单而纯粹的JavaScript方式:
<li ng-repeat="car in cars">
<p2 ng-repeat="item in [].constructor(car.count) track by $index">{{car.element}}</p2>
</li>
答案 2 :(得分:1)
您可以在主要ng-repeat中使用另一个ng-repeat
并使用自定义过滤器,它返回大小为car.count
的空数组...
<li ng-repeat="car in cars">
<p2 ng-repeat="item in car | carCount track by $index">{{car.element}}</p2>
</li>
以下是我们的自定义过滤器代码 carCount
app.filter('carCount', function() {
return function (car) {
return new Array(car.count);
}
});
这是您更新的plunker
答案 3 :(得分:1)
您可以这样做:
<li ng-repeat="car in cars">
<p2 ng-repeat="i in _.range(1,car.count)">{{car.element}}</p2>
</li>
在你的控制器中,你必须向这样的范围添加下划线(或一个给你一个范围的函数)
$rootScope._ = _;
或
$scope.range = _.range
答案 4 :(得分:1)
您可以根据每个汽车项目提供的计数动态创建一个数组。然后循环遍历该数组并仅::
仅用于评估createArray
函数绑定一次。
<强>标记强>
<li ng-repeat="car in cars">
<p2 ng-repeat="item in ::createArray(car.count) track by $index">{{car.element}}</p2>
</li>
<强>控制器强>
$scope.createArray = function(count) {
return new Array(count);
}
答案 5 :(得分:0)
您可以在app.js中添加一个按计数显示汽车的功能。因此,执行以下操作将为您提供所需的结果:
app.js中的
$scope.displayCarByCount = function(car) {
var carString = '';
for(var i= 0; i < car.count; i++) {
carString += car.element + ' ';
}
return carString;
}
HTML中的
<li ng-repeat="car in cars">
<p2>{{displayCarByCount(car)}}</p2>
</li>
以下是plnkr,以防您不想阅读。