Question

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

<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-odd和$ even变量？例如，我尝试了ng-init="sides = [$odd,$even]" and passed that in the ng-repeat for the innercolumn template并将ng-if="side"放入模板中，但没有去。

我还想过传递像ng-if =＆＃34; whichSide（side）＆＃34;这将返回$ odd或$ even，但似乎$ scope和$ even变量未在$ scope对象上定义...

但这就是我试图了解$ odd和$ even变量并间接引用它们的精神......希望这是有道理的。该项目工作得很好，每当我进行更新时，对3行代码进行更改时只会烦恼，而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是偶数（否则为false），则为true。

$odd - 如果迭代器位置$ index为奇数（否则为false），则为true。

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

1 个答案: