在条件下输出 <div>答案

【问题标题】：Output <div> on condition在条件下输出 <div>
【发布时间】：2016-10-20 22:32:46
【问题描述】：

在 AngularJS 中，我想输出成对分隔的项目。像下面的 HTML 标记：

<div class="group">
   <div>item 1</div>
   <div>item 2</div>
</div>
<div class="group">
   <div>item 3</div>
   <div>item 4</div>
</div>

在我的中继器中，我尝试使用 ng-if="$index % 2 == 0"。但我在奇数索引上失去了 div。我应该如何编写条件以显示该组 div 的两个项目一次？

【问题讨论】：

您正在丢失奇数索引 div，因为 $index 从 0 开始，所以您可能可以执行 $index%2 == 1。（虽然不确定您要解决的实际问题是什么）
我正在丢失 div，因为由于这种情况，整个 div 及其内容都没有显示出来。
对不起，我从你的问题中错过了这个

标签： javascript html angularjs foreach conditional-statements

【解决方案1】：

你可以试试这样的。

.group {
  border: 1px solid red;
  display: block;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="" data-ng-init="products=['apple','orange','Peach','Strawberry','Banana','Blueberry']" class="">
    <div ng-repeat="product in products" ng-if="$index % 2 == 0" class="group">
        <div >{{products[$index]}}</div>
        <div >{{products[$index + 1]}}</div> 
    </div>
</div>

【讨论】：

这无济于事，因为我需要两个元素的组 div 一次。
是的，更新后的代码完全符合我的需要。谢谢！

【解决方案2】：

过滤器定义为：

var myApp = angular.module('myApp', []);
myApp.filter('range', function() {
return function(input, total) {
total = parseInt(total);

for (var i=0; i<total; i+=2) {
  input.push(i);
 }

return input;
 };
 });

这样重复使用：

<div class="group" ng-repeat="n in [] | range:100">
  <div>item {{n+1}}</div>
  <div>item {{n+2}}</div>
</div>

您所要做的就是定义您的 ng-repeat 的范围。

【讨论】：