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.
* 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
* This example initializes the scope to a list of names and
* than uses `ng:repeat` to display every person.
@ -477,9 +481,24 @@ angularWidget("@ng:repeat", function(expression, element){
var children = [], currentScope = this;
this.$onEval(function(){
var index = 0, childCount = children.length, childScope, lastElement = reference,
collection = this.$tryEval(rhs, reference), is_array = isArray(collection);
for ( var key in collection) {
var index = 0,
childCount = children.length,
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 (index < childCount) {
// reuse existing child
@ -493,6 +512,9 @@ angularWidget("@ng:repeat", function(expression, element){
if (keyIdent) childScope[keyIdent] = key;
lastElement.after(childScope.$element);
childScope.$index = index;
childScope.$position = index == 0 ?
'first' :
(index == collectionLength - 1 ? 'last' : 'middle');
childScope.$element.attr('ng:repeat-index', index);
childScope.$init();
children.push(childScope);

View file

@ -135,38 +135,75 @@ describe("directives", function(){
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";
scope.items = ['misko', 'shyam'];
scope.$eval();
expect(element.text()).toEqual('misko;shyam;');
delete Array.prototype.extraProperty;
describe('ng:repeat', function() {
scope.items = ['adam', 'kai', 'brad'];
scope.$eval();
expect(element.text()).toEqual('adam;kai;brad;');
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>');
scope.items = ['brad'];
scope.$eval();
expect(element.text()).toEqual('brad;');
Array.prototype.extraProperty = "should be ignored";
scope.items = ['misko', 'shyam'];
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(){
var scope = compile('<div ng:watch="i: count = count + 1" ng:init="count = 0">');