Question

我有一个这样的对象：

$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！

Answer 1

您可以使用嵌套的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

Answer 2

这是一种简单而纯粹的JavaScript方式：

<li ng-repeat="car in cars">
    <p2 ng-repeat="item in [].constructor(car.count) track by $index">{{car.element}}</p2>
</li>

Answer 3

您可以在主要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

Answer 4

您可以这样做：

<li ng-repeat="car in cars">
      <p2 ng-repeat="i in _.range(1,car.count)">{{car.element}}</p2>
</li>

在你的控制器中，你必须向这样的范围添加下划线（或一个给你一个范围的函数）

$rootScope._ = _;

或

$scope.range = _.range

Answer 5

您可以根据每个汽车项目提供的计数动态创建一个数组。然后循环遍历该数组并仅::仅用于评估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);
}

Demo Plunkr

Answer 6

您可以在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，以防您不想阅读。

Ng-根据其属性多次重复一个元素

6 个答案: