Question

假设我有一份苹果清单，我想在每个篮子里放4个苹果。在HTML中，它将如下所示：

<div class="basket">
   <span class="apple">Green</span>
   <span class="apple">Green</span>
   <span class="apple">Green</span>
   <span class="apple">Green</span>
</div>

<div class="basket">
   <span class="apple">Green</span>
   <span class="apple">Green</span>
   <span class="apple">Green</span>
   <span class="apple">Green</span>
</div>

我希望能够在Angualrjs中使用ng-repeat执行此操作：

<div class="basket" ng-repeat="apple in apples>
   <span class="apple">{{apple.color}}</span>
</div>

每4个苹果创造一个新的篮子等。

Answer 1

你试过吗，ng-if

array_walk($links,function($value,$key) {
  $value = trim($value);
});
$links = array_filter(
  $links,function($element) {
  return strpos($element,'http://mega.co.il') !== true;
});

See the plunker

Answer 2

我认为您最好的答案在于如何构建模型。我会以分层方式填充它，以最好地支持html中所需的渲染。

<强>控制器

app.controller('MainCtrl', function($scope) {
  $scope.appleBaskets = [{
    basketId: 1,
    apples: [{
      color: 'green'
    }, {
      color: 'red'
    }, {
      color: 'gold'
    }, {
      color: 'red'
    }, ]
  }, {
    basketId: 2,
    apples: [{
      color: 'green'
    }, {
      color: 'red'
    }, {
      color: 'green'
    }, {
      color: 'yellow'
    }]
  }, {
    basketId: 3,
    apples: [{
      color: 'green'
    }, {
      color: 'red'
    }, {
      color: 'green'
    }, {
      color: 'red'
    }]
  }]
});

<强> HTML

<body ng-controller="MainCtrl">
  <div ng-repeat="appleBasket in appleBaskets">
    <div>{{appleBasket.basketId}}</div>
    <div ng-repeat="apple in appleBasket.apples">
      <span>{{apple.color}}</span>
    </div>
  </div>
</body>

Answer 3

一种方法是拥有一个basket数组，每个数组都包含一个apple数组。那么你可以将ng-repeat嵌套为......

<div class="basket" ng-repeat="basket in baskets">
   <span class="apple" ng-repeat="apple in basket.apples">{{apple.color}}</span>
</div>

如果你只想要一个苹果的一维数组，而不是一个包含苹果的二维篮子阵列，那么你可以用苹果在视觉上将苹果分成几个。

执行此操作的一种方法是设置一个名为new-line的CSS类，并将其定义为设置display: block;或任何您想要用来强制换行的内容。

然后使用ng-class根据$index值动态设置CSS。

<div class="basket" ng-repeat="apple in apples" ng-class="{ 'new-line' : $index % 4 === 0 }">
   <span class="apple">{{apple.color}}</span>
</div>

Answer 4

如果您知道班级basket的宽度，那么您可以将班级apple的格式设置为总宽度的25％：

.basket {
    width: 500px;
}
.apple {
    width: 125px;
}

Angularjs ng-repeat为每个第4项开始一个新行？

4 个答案: