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

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 中使用另一个 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 2

你可以这样做：

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

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

$rootScope._ = _;

或

$scope.range = _.range

Answer 3

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

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

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

Answer 6

有一种简单纯粹的 JavaScript 方式：

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