Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
feat(ngRepeat): add $even and $odd props to iterator
Browse files Browse the repository at this point in the history
  • Loading branch information
npup authored and ksheedlo committed Jul 24, 2013
1 parent 0fcd1e3 commit 52b8211
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 1 deletion.
3 changes: 3 additions & 0 deletions src/ng/directive/ngRepeat.js
Expand Up @@ -17,6 +17,8 @@
* | `$first` | {@type boolean} | true if the repeated element is first in the iterator. |
* | `$middle` | {@type boolean} | true if the repeated element is between the first and last in the iterator. |
* | `$last` | {@type boolean} | true if the repeated element is last in the iterator. |
* | `$even` | {@type boolean} | true if the iterator position `$index` is even (otherwise false). |
* | `$odd` | {@type boolean} | true if the iterator position `$index` is odd (otherwise false). |
*
* Additionally, you can also provide animations via the ngAnimate attribute to animate the **enter**,
* **leave** and **move** effects.
Expand Down Expand Up @@ -354,6 +356,7 @@ var ngRepeatDirective = ['$parse', '$animator', function($parse, $animator) {
childScope.$first = (index === 0);
childScope.$last = (index === (arrayLength - 1));
childScope.$middle = !(childScope.$first || childScope.$last);
childScope.$odd = !(childScope.$even = index%2==0);

if (!block.startNode) {
linker(childScope, function(clone) {
Expand Down
63 changes: 62 additions & 1 deletion test/ng/directive/ngRepeatSpec.js
Expand Up @@ -353,7 +353,6 @@ describe('ngRepeat', function() {
expect(element.text()).toEqual('misko:0|shyam:1|frodo:2|');
});


it('should expose iterator offset as $index when iterating over objects', function() {
element = $compile(
'<ul>' +
Expand Down Expand Up @@ -395,6 +394,32 @@ describe('ngRepeat', function() {
});


it('should expose iterator position as $even and $odd when iterating over arrays',
function() {
element = $compile(
'<ul>' +
'<li ng-repeat="item in items">{{item}}:{{$even}}-{{$odd}}|</li>' +
'</ul>')(scope);
scope.items = ['misko', 'shyam', 'doug'];
scope.$digest();
expect(element.text()).
toEqual('misko:true-false|shyam:false-true|doug:true-false|');

scope.items.push('frodo');
scope.$digest();
expect(element.text()).
toBe('misko:true-false|' +
'shyam:false-true|' +
'doug:true-false|' +
'frodo:false-true|');

scope.items.shift();
scope.items.pop();
scope.$digest();
expect(element.text()).toBe('shyam:true-false|doug:false-true|');
});


it('should expose iterator position as $first, $middle and $last when iterating over objects',
function() {
element = $compile(
Expand All @@ -420,6 +445,27 @@ describe('ngRepeat', function() {
});


it('should expose iterator position as $even and $odd when iterating over objects',
function() {
element = $compile(
'<ul>' +
'<li ng-repeat="(key, val) in items">{{key}}:{{val}}:{{$even}}-{{$odd}}|</li>' +
'</ul>')(scope);
scope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f'};
scope.$digest();
expect(element.text()).
toBe('doug:d:true-false|' +
'frodo:f:false-true|' +
'misko:m:true-false|' +
'shyam:s:false-true|');

delete scope.items.frodo;
delete scope.items.shyam;
scope.$digest();
expect(element.text()).toBe('doug:d:true-false|misko:m:false-true|');
});


it('should calculate $first, $middle and $last when we filter out properties from an obj', function() {
element = $compile(
'<ul>' +
Expand All @@ -435,6 +481,21 @@ describe('ngRepeat', function() {
});


it('should calculate $even and $odd when we filter out properties from an obj', function() {
element = $compile(
'<ul>' +
'<li ng-repeat="(key, val) in items">{{key}}:{{val}}:{{$even}}-{{$odd}}|</li>' +
'</ul>')(scope);
scope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f', '$toBeFilteredOut': 'xxxx'};
scope.$digest();
expect(element.text()).
toEqual('doug:d:true-false|' +
'frodo:f:false-true|' +
'misko:m:true-false|' +
'shyam:s:false-true|');
});


it('should ignore $ and $$ properties', function() {
element = $compile('<ul><li ng-repeat="i in items">{{i}}|</li></ul>')(scope);
scope.items = ['a', 'b', 'c'];
Expand Down

1 comment on commit 52b8211

@coli
Copy link

@coli coli commented on 52b8211 Aug 19, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$index and $length? 😆

Please sign in to comment.