伍重复一个元素多次

我有一个这样的对象：伍重复一个元素多次

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

，但我想知道是否有可能在角（这样我就可以申请它，即使我不知道whic做一般情况下h号码将出现在car.count）

您可以检查the plunkr here提前致谢！

来源

2016-12-13 Joe82

有一个简单而纯粹的JavaScript方式：

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

来源

2016-12-13 19:42:22

我会将其标记为有效，因为我认为它是最合适的。感谢您的答案！ – Joe82

您可以使用另一个ng-repeat你主要NG-重复内使用自定义过滤器返回大小为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

来源

2016-12-13 19:22:00

谢谢您的回答，但我需要一种方法来做到这一点，因此将与计数，我不会预先知道的任何值作品（例如，计数：20）。 – Joe82

@ Joe82抱歉，我明白你的问题错了退房更新的答案... –

你可以做这样的事情：

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

而在你的控制器，你必须下划线（或给你一个范围内的功能）加入到范围这样

$rootScope._ = _;

或

$scope.range = _.range

来源

2016-12-13 19:31:31

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

来源

2016-12-13 19:38:33

真是巧合！我们两人在同一时间有相同的答案，只有5秒的差异。你打败了我！ +1 –

这是一个非常优雅的解决方案，我需要将我的解决方案游戏加入lol –

动态地根据每个车项目提供的数，您可以创建一个阵列。然后遍历该数组，并且只有::仅用于评估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

来源

2016-12-13 19:39:02

你可以去了解它在你的应用程序添加功能。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你不只是想读。

来源

2016-12-13 19:39:26

伍重复一个元素多次

回答

相关问题