ng-repeat: how do I properly reference $odd or $even by variable?

Question

How can I reference $odd or $even by variable in ng-repeat? I am trying to do this:

<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>

By doing this:

<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}} results in $odd and $even text on the document where expected, but all the {{item}} are coming through.

I've tried ng-if="side", ng-if=side, ng-if={{side}}, ng-if=" 'side' ". I'm sure this is just my rookie ignorance at play and its staring me right in the face.

Edit:::

Sorry I wasn't clear. Assigning $odd and $even was simple enough if I wanted to write out the whole layout longhand, which I relented and did for now. What I would like to do, however, is use ng-include to template the reused portions of the layout as much as possible. A very simplified version of my layout looks something like this:

What I would like to do is turn something like this:

<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>

into something like this:

<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>

The question is: how can I reference the $odd and $even variables for ng-if indirectly? for example, I tried an ng-init="sides = [$odd,$even]" and passed that in the ng-repeat for the innercolumn template and put ng-if="side" into the template, but no go.

I also thought about passing a function like ng-if="whichSide(side)" That would return $odd or $even, but it seems like the $odd and $even variables are not defined on the $scope object...

But that's the spirit of what I'm trying to understand regarding the $odd and $even variables and indirectly referencing them.... Hope that makes sense. The project is working just fine, it's just annoying to make changes to 10 lines of code whenever I make an update vs. 3 lines of templated layout. Thanks!

hey.... @dan chow, was my answer able to help you? Will you please respond with some findings? — scniro, Oct 08 '15 at 21:36

scniro · Answer 1 · 2015-10-07T01:48:38.930

$odd and $even are available variables in an ng-repeat. It looks like you are instead trying to evaluate a string literal. Observe the following example and model your working copy from there...

<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 - working demo

Also, I'm not entirely sure what your overall goal is, but in my example, I am applying classes to style $even and $odd for demonstration. AngularJS offers ngClassOdd and ngClassEven as an alternative for accomplishing this as well. Lastly, if you are evaluating both $even and $odd - all items will of course show.

Check out the ngRepeat docs for available variables you will have to evaluate

$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).

Thank you for your answer. I updated my inquiry to better reflect my intention, sorry I wasn't clear. I had already marked up the layout using $odd and $even in the longhand markup, but was trying to collapse it into a templated layout that utilized the ng-include awesomeness and ran into trouble trying to dynamically assign $odd or $even to nested items. — dan chow, Oct 10 '15 at 00:13

ng-repeat: how do I properly reference $odd or $even by variable?

1 Answers1