Question

我的MVC应用程序中有一个for循环，如此

for(var i = 0; i < data.length; i +=2){
    <div class='@(i== 0? "item active": "item")'>
       <div>
          @Html.Raw(data[i].Description)
       </div>
       <div>
          @Html.Raw(data[i + 1].Description)
       </div>
    </div>
}

我想在angularjs中转换上面的代码。

表示每个循环从当前和下一个数组索引渲染记录，比如说i = 0然后渲染第一个和第二个记录详细信息。

实际上它是一个大对象，为了清楚起见我减少了代码，我想在ng-repeat中编写相同的代码

See the fiddle

Answer 1

你基本上想要这样的东西：

<div ng-repeat="dataEntry in data" ng-class="{active: $first}" class="item">
    <div>{{ dataEntry.Description }}</div>
    <div ng-if="!$last">{{ data[$index + 1].Description }}</div>
</div>

使用ng-repeat循环数据条目
使用ng-class仅将'active'类应用于第一个条目（您可以访问ng-repeat范围内的$ first，$ last，$ even和$ odd，（为布尔值））< / LI>
dataEntry表示data每次迭代的每个条目。使用{{}}访问并呈现内容
您可以使用$index + 1来获取条目数组中的下一个条目。

我假设您知道必须在$ scope中附加/访问此方案中的data。

Answer 2

我最终得到了一个肮脏的伎俩：

<div ng-repeat="item in data" 
     ng-class="{active: $first}" class="item row" 
     ng-if='$index % 2 == 0'> 
      <div class='col-lg-6'>{{ item.a }}</div>
      <div class='col-lg-6'>{{ data[$index + 1].a }}</div> 
</div>

如果$ index％2 == 0只有渲染，则表示0,2,4 ......它可以正常工作。

See to codepen

Angularjs ng-repeat迭代2

2 个答案: