javascript - ng-重复 : how do I properly reference $odd or $even by variable?

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]"并将其传递到内部列模板的 ng-repeat 中 并放置 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 - iterator offset of the repeated element (0..length-1)
• $first - true if the repeated element is first in the iterator.
• $middle - true if the repeated element is between the first and last in the iterator.
• $last - true if the repeated element is last in the iterator.
• $even - true if the iterator position $index is even (otherwise false).
• $odd - true if the iterator position $index is odd (otherwise false).