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

时间:2016-12-16 00:29:06

标签: angularjs

我有一个问题。我怎样才能用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>

3 个答案:

答案 0 :(得分:0)

将ng-repeater与过滤器一起使用

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

答案 1 :(得分:0)

您可以创建一个函数将数组拆分为任何块:

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>

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

答案 2 :(得分:0)

<强> 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;
}