Make ng:repeat expose $position.

- $position is a textual representation of the position of
  repeated item ('first', 'middle', 'last')
- added specs for $index
This commit is contained in:
Igor Minar 2010-11-10 16:14:47 -08:00
parent 0499c47270
commit c5b2bf083c
2 changed files with 89 additions and 30 deletions

View file

@ -434,6 +434,10 @@ angularWidget("@ng:non-bindable", noop);
* scope expression giving the collection to enumerate. * scope expression giving the collection to enumerate.
* For example: `(name, age) in {'adam':10, 'amalie':12}`. * For example: `(name, age) in {'adam':10, 'amalie':12}`.
* *
* Special properties set on the local scope:
* * {number} $index - iterator offset of the repeated element (0..length-1)
* * {string} $position - position of the repeated element in the iterator ('first', 'middle', 'last')
*
* @exampleDescription * @exampleDescription
* This example initializes the scope to a list of names and * This example initializes the scope to a list of names and
* than uses `ng:repeat` to display every person. * than uses `ng:repeat` to display every person.
@ -477,9 +481,24 @@ angularWidget("@ng:repeat", function(expression, element){
var children = [], currentScope = this; var children = [], currentScope = this;
this.$onEval(function(){ this.$onEval(function(){
var index = 0, childCount = children.length, childScope, lastElement = reference, var index = 0,
collection = this.$tryEval(rhs, reference), is_array = isArray(collection); childCount = children.length,
for ( var key in collection) { lastElement = reference,
collection = this.$tryEval(rhs, reference),
is_array = isArray(collection),
collectionLength = 0,
childScope,
key;
if (is_array) {
collectionLength = collection.length;
} else {
for (key in collection)
if (collection.hasOwnProperty(key))
collectionLength++;
}
for (key in collection) {
if (!is_array || collection.hasOwnProperty(key)) { if (!is_array || collection.hasOwnProperty(key)) {
if (index < childCount) { if (index < childCount) {
// reuse existing child // reuse existing child
@ -493,6 +512,9 @@ angularWidget("@ng:repeat", function(expression, element){
if (keyIdent) childScope[keyIdent] = key; if (keyIdent) childScope[keyIdent] = key;
lastElement.after(childScope.$element); lastElement.after(childScope.$element);
childScope.$index = index; childScope.$index = index;
childScope.$position = index == 0 ?
'first' :
(index == collectionLength - 1 ? 'last' : 'middle');
childScope.$element.attr('ng:repeat-index', index); childScope.$element.attr('ng:repeat-index', index);
childScope.$init(); childScope.$init();
children.push(childScope); children.push(childScope);

View file

@ -135,38 +135,75 @@ describe("directives", function(){
expect(element.text()).toEqual(''); expect(element.text()).toEqual('');
}); });
it('should ng:repeat over array', function(){
var scope = compile('<ul><li ng:repeat="item in items" ng:init="suffix = \';\'" ng:bind="item + suffix"></li></ul>');
Array.prototype.extraProperty = "should be ignored"; describe('ng:repeat', function() {
scope.items = ['misko', 'shyam'];
scope.$eval();
expect(element.text()).toEqual('misko;shyam;');
delete Array.prototype.extraProperty;
scope.items = ['adam', 'kai', 'brad']; it('should ng:repeat over array', function(){
scope.$eval(); var scope = compile('<ul><li ng:repeat="item in items" ng:init="suffix = \';\'" ng:bind="item + suffix"></li></ul>');
expect(element.text()).toEqual('adam;kai;brad;');
scope.items = ['brad']; Array.prototype.extraProperty = "should be ignored";
scope.$eval(); scope.items = ['misko', 'shyam'];
expect(element.text()).toEqual('brad;'); scope.$eval();
expect(element.text()).toEqual('misko;shyam;');
delete Array.prototype.extraProperty;
scope.items = ['adam', 'kai', 'brad'];
scope.$eval();
expect(element.text()).toEqual('adam;kai;brad;');
scope.items = ['brad'];
scope.$eval();
expect(element.text()).toEqual('brad;');
});
it('should ng:repeat over object', function(){
var scope = compile('<ul><li ng:repeat="(key, value) in items" ng:bind="key + \':\' + value + \';\' "></li></ul>');
scope.$set('items', {misko:'swe', shyam:'set'});
scope.$eval();
expect(element.text()).toEqual('misko:swe;shyam:set;');
});
it('should error on wrong parsing of ng:repeat', function(){
var scope = compile('<ul><li ng:repeat="i dont parse"></li></ul>');
var log = "";
log += element.attr('ng-exception') + ';';
log += element.hasClass('ng-exception') + ';';
expect(log).toEqual("\"Expected ng:repeat in form of 'item in collection' but got 'i dont parse'.\";true;");
});
it('should expose iterator offset as $index when iterating over arrays', function() {
var scope = compile('<ul><li ng:repeat="item in items" ' +
'ng:bind="item + $index + \'|\'"></li></ul>');
scope.items = ['misko', 'shyam', 'frodo'];
scope.$eval();
expect(element.text()).toEqual('misko0|shyam1|frodo2|');
});
it('should expose iterator offset as $index when iterating over objects', function() {
var scope = compile('<ul><li ng:repeat="(key, val) in items" ' +
'ng:bind="key + \':\' + val + $index + \'|\'"></li></ul>');
scope.items = {'misko':'m', 'shyam':'s', 'frodo':'f'};
scope.$eval();
expect(element.text()).toEqual('misko:m0|shyam:s1|frodo:f2|');
});
it('should expose iterator position as $position when iterating over arrays', function() {
var scope = compile('<ul><li ng:repeat="item in items" ' +
'ng:bind="item + \':\' + $position + \'|\'"></li></ul>');
scope.items = ['misko', 'shyam', 'doug', 'frodo'];
scope.$eval();
expect(element.text()).toEqual('misko:first|shyam:middle|doug:middle|frodo:last|');
});
it('should expose iterator position as $position when iterating over objects', function() {
var scope = compile('<ul><li ng:repeat="(key, val) in items" ' +
'ng:bind="key + \':\' + val + \':\' + $position + \'|\'"></li></ul>');
scope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f'};
scope.$eval();
expect(element.text()).toEqual('misko:m:first|shyam:s:middle|doug:d:middle|frodo:f:last|');
});
}); });
it('should ng:repeat over object', function(){
var scope = compile('<ul><li ng:repeat="(key, value) in items" ng:bind="key + \':\' + value + \';\' "></li></ul>');
scope.$set('items', {misko:'swe', shyam:'set'});
scope.$eval();
expect(element.text()).toEqual('misko:swe;shyam:set;');
});
it('should error on wrong parsing of ng:repeat', function(){
var scope = compile('<ul><li ng:repeat="i dont parse"></li></ul>');
var log = "";
log += element.attr('ng-exception') + ';';
log += element.hasClass('ng-exception') + ';';
expect(log).toEqual("\"Expected ng:repeat in form of 'item in collection' but got 'i dont parse'.\";true;");
});
it('should ng:watch', function(){ it('should ng:watch', function(){
var scope = compile('<div ng:watch="i: count = count + 1" ng:init="count = 0">'); var scope = compile('<div ng:watch="i: count = count + 1" ng:init="count = 0">');