ng-repeat：如何正確引用$ odd或$甚至通過變量？

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的$ 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變量以及間接引用它們的精神......希望這是有道理的。這個項目工作得很好，只要我進行更新和3行模板化佈局，只需修改10行代碼即可。謝謝！

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。