ng-repeat：如何通过变量正确引用 $odd 或 $even？

Question

如何通过ng-repeat 中的变量引用$odd 或$even？ 我正在尝试这样做：

<ng-repeat="item in items" ng-if="$odd">these are odd{{item}}</div>
<ng-repeat="item in items" ng-if="$even">these are even {{item}}</div>

通过这样做：

<div ng-repeat="side in sides">
  <div ng-include='template'></div>
</div>

//template
<ng-repeat="item in items" ng-if="side">these are {{side}} {{item}}</div>

//in the controller
$scope.sides = ['$odd','$even']

{{side}} 会在预期的文档上产生$odd 和$even 文本，但所有{{item}} 都通过了。

我试过ng-if="side"、ng-if=side、ng-if={{side}}、ng-if=" 'side' "。 我敢肯定，这只是我在比赛中的新手无知，它正盯着我的脸。

编辑:::

对不起，我不清楚。如果我想用手写的方式写出整个布局，那么分配 $odd 和 $even 就足够简单了，我现在放弃并这样做了。然而，我想做的是使用 ng-include 尽可能多地模板化布局的重用部分。我的布局的一个非常简化的版本如下所示：

我想做的是这样的：

<div class="outer-column1">
  <div class="innercolumnA">
    <div class="thumbnail" ng-repeat"thumbnail in thumbnail" ng-if"$even"></div>
  </div>
  <div class="innercolumnB">
    <div class="thumbnail" ng-repeat"thumbnail in thumbnail" ng-if"$odd"></div>
  </div>
</div>

<div class="outer-column2">
  <div class="innercolumnA">
    <div class="thumbnail" ng-repeat"thumbnail in thumbnail" ng-if"$even"></div>
  </div>
  <div class="innercolumnB">
    <div class="thumbnail" ng-repeat"thumbnail in thumbnail" ng-if"$odd"></div>
  </div>
</div>

变成这样的：

<div ng-include="outer-column" ng-repeat="outercolumn in outercolumns"></div>

//template outer-column
<div class="outer-column">
  <div ng-include="inner-column" ng-init="innercolumns = [$odd,$even] " ng-repeat="innercolumn in innercolumns"></div>
</div>

//template inner-column
<div class="innercolumn" ng>
   <div ng-include="'thumbnail'" ng-repeat"thumbnail in thumbnail" ng-if"innercolumn"></div>
</div>

//template thumbnail
<div class="thumbnail"></div>

问题是：如何间接引用 ng-if 的 $odd 和 $even 变量？例如，我尝试了ng-init="sides = [$odd,$even]" and passed that in the ng-repeat for the innercolumn template 并将ng-if="side" 放入模板中，但不行。

我还考虑过传递一个像 ng-if="whichSide(side)" 这样的函数，它会返回 $odd 或 $even，但似乎 $odd 和 $even 变量没有在 $scope 对象上定义。 ..

但这就是我试图理解的关于 $odd 和 $even 变量并间接引用它们的精神......希望这是有道理的。该项目运行良好，每当我进行更新时对 10 行代码进行更改与 3 行模板化布局相比，这很烦人。谢谢！

Answer 1

$odd 和 $even 是 ng-repeat 中的可用变量。看起来您正在尝试评估字符串文字。观察以下示例并从那里为您的工作副本建模...

<div ng-app="app" ng-controller="ctrl">
    <div ng-repeat="o in items" ng-if="$odd" class="odd">index: {{ $index }} value: {{ o }}</div>
    <div ng-repeat="o in items" ng-if="$even" class="even">index: {{ $index }}  value: {{ o }}</div>
</div>

---

// -- for visual demo. ng-if will work the same
.odd  { background-color: dodgerblue; }
.even { background-color: tomato; }

---

angular.module('app', [])
.controller('ctrl', function($scope) {
    $scope.items = [1, 2, 3, 4, 5];
})

JSFiddle Link - 工作演示

另外，我不完全确定您的总体目标是什么，但在我的示例中，我将类应用到样式 $even 和 $odd 以进行演示。 AngularJS 也提供了ngClassOdd 和ngClassEven 作为实现此目的的替代方案。最后，如果您同时评估 $even 和 $odd - 所有项目当然都会显示。

---

查看ngRepeat docs 了解您必须评估的可用变量

• $index - 重复元素的迭代器偏移量（0..length-1）
• $first - 如果重复元素是迭代器中的第一个元素，则为 true。
• $middle - 如果重复元素在迭代器中的第一个和最后一个之间，则为 true。
• $last - 如果重复元素是迭代器中的最后一个元素，则为 true。
• $even - 如果迭代器位置 $index 为偶数则为真（否则为假）。
• $odd - 如果迭代器位置 $index 为奇数则为真（否则为假）。