用ng-repeat显示不同数量的项目

我有问题。我如何用ng-repeat做这个例子？与过滤器一起用ng-repeat显示不同数量的项目

var collection = ['A', 'B', 'C', 'D', 'E']; 

<div class="item active"> 
<p>A</b> 
<p>B</b> 
</div> 
<div class="item"> 
    <p>C</b> 
    <p>D</b> 
</div> 
<div class="item"> 
    <p>E</b> 
</div>

来源

2016-12-16 Luiz Picorelli

您可以使用ngRepeat只有当你在所有的段相同的行为。我的意思是，你必须在每个子部分显示相同数量的元素。如果我想在下一个分区显示'F，G'怎么办？在这种情况下，你需要拆分你的整个数组，或者你需要使它们成为对象格式并将你的子部分列表项分组。 –

您可以创建一个函数来您的阵列分割成任意块：

Array.prototype.chunk = function (n) { 
    if (!this.length) { 
     return []; 
    } 
    return [ this.slice(0, n) ].concat(this.slice(n).chunk(n)); 
};

而在你的HTML：

<div ng-repeat="item in collection.chunk(2) track by $index"> 
    <div class="item" ng-class="{active: $index == 0}"> 
     <p ng-repeat="subItem in item" ng-bind="subItem"></b>   
    </div> 
</div>

当然还有很多其他方法可以做到这一点。

来源

2016-12-16 00:58:16 Yaser

使用NG-中继

<div ng-repeat="item in collection | filter:<your filter.. probably index of a collection>">

来源

2016-12-16 00:43:26 Kalyan

HTML：

<div ng-repeat="item in alphas track by $index"> 
    <div ng-if="call($index)"> 
     <p>{{alphas[$index]}}</p> 
     <p>{{alphas[$index+1]}}</p> 
     <hr/> 
    </div> 
</div>

控制器：

$scope.alphas = ['A', 'B', 'C', 'D', 'E']; 
$scope.call = function(i){ 
    if(i%2 === 0) 
     return true; 
    else 
     return false; 
}

来源

2016-12-16 05:57:46

好逻辑。好。 – SaiUnique

用ng-repeat显示不同数量的项目

回答

相关问题