mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-16 23:30:23 +00:00
fix(ngRepeat): expose $first, $middle and $last instead of $position
$position marker doesn't work well in cases when we have just one item in the list because then the item is both the first and last. To solve this properly we need to expose individual $first and $middle and $last flags. BREAKING CHANGE: $position is not exposed in repeater scopes any more To update, search for $position and replace it with one of $first, $middle or $last. Closes #912
This commit is contained in:
parent
84542d2431
commit
1d388676e3
2 changed files with 34 additions and 18 deletions
|
|
@ -12,10 +12,9 @@
|
|||
* Special properties are exposed on the local scope of each template instance, including:
|
||||
*
|
||||
* * `$index` – `{number}` – iterator offset of the repeated element (0..length-1)
|
||||
* * `$position` – `{string}` – position of the repeated element in the iterator. One of:
|
||||
* * `'first'`,
|
||||
* * `'middle'`
|
||||
* * `'last'`
|
||||
* * `$first` – `{boolean}` – true if the repeated element is first in the iterator.
|
||||
* * `$middle` – `{boolean}` – true if the repeated element is between the first and last in the iterator.
|
||||
* * `$last` – `{boolean}` – true if the repeated element is last in the iterator.
|
||||
*
|
||||
*
|
||||
* @element ANY
|
||||
|
|
@ -145,9 +144,10 @@ var ngRepeatDirective = ngDirective({
|
|||
childScope[valueIdent] = value;
|
||||
if (keyIdent) childScope[keyIdent] = key;
|
||||
childScope.$index = index;
|
||||
childScope.$position = index === 0 ?
|
||||
'first' :
|
||||
(index == collectionLength - 1 ? 'last' : 'middle');
|
||||
|
||||
childScope.$first = (index === 0);
|
||||
childScope.$last = (index === (collectionLength - 1));
|
||||
childScope.$middle = !(childScope.$first || childScope.$last);
|
||||
|
||||
if (!last) {
|
||||
linker(childScope, function(clone){
|
||||
|
|
|
|||
|
|
@ -104,42 +104,58 @@ describe('ngRepeat', function() {
|
|||
}));
|
||||
|
||||
|
||||
it('should expose iterator position as $position when iterating over arrays',
|
||||
it('should expose iterator position as $first, $middle and $last when iterating over arrays',
|
||||
inject(function($rootScope, $compile) {
|
||||
element = $compile(
|
||||
'<ul>' +
|
||||
'<li ng-repeat="item in items" ng-bind="item + \':\' + $position + \'|\'"></li>' +
|
||||
'<li ng-repeat="item in items">{{item}}:{{$first}}-{{$middle}}-{{$last}}|</li>' +
|
||||
'</ul>')($rootScope);
|
||||
$rootScope.items = ['misko', 'shyam', 'doug'];
|
||||
$rootScope.$digest();
|
||||
expect(element.text()).toEqual('misko:first|shyam:middle|doug:last|');
|
||||
expect(element.text()).
|
||||
toEqual('misko:true-false-false|shyam:false-true-false|doug:false-false-true|');
|
||||
|
||||
$rootScope.items.push('frodo');
|
||||
$rootScope.$digest();
|
||||
expect(element.text()).toEqual('misko:first|shyam:middle|doug:middle|frodo:last|');
|
||||
expect(element.text()).
|
||||
toEqual('misko:true-false-false|' +
|
||||
'shyam:false-true-false|' +
|
||||
'doug:false-true-false|' +
|
||||
'frodo:false-false-true|');
|
||||
|
||||
$rootScope.items.pop();
|
||||
$rootScope.items.pop();
|
||||
$rootScope.$digest();
|
||||
expect(element.text()).toEqual('misko:first|shyam:last|');
|
||||
expect(element.text()).toEqual('misko:true-false-false|shyam:false-false-true|');
|
||||
|
||||
$rootScope.items.pop();
|
||||
$rootScope.$digest();
|
||||
expect(element.text()).toEqual('misko:true-false-true|');
|
||||
}));
|
||||
|
||||
|
||||
it('should expose iterator position as $position when iterating over objects',
|
||||
it('should expose iterator position as $first, $middle and $last when iterating over objects',
|
||||
inject(function($rootScope, $compile) {
|
||||
element = $compile(
|
||||
'<ul>' +
|
||||
'<li ng-repeat="(key, val) in items" ng-bind="key + \':\' + val + \':\' + $position + \'|\'">' +
|
||||
'</li>' +
|
||||
'<li ng-repeat="(key, val) in items">{{key}}:{{val}}:{{$first}}-{{$middle}}-{{$last}}|</li>' +
|
||||
'</ul>')($rootScope);
|
||||
$rootScope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f'};
|
||||
$rootScope.$digest();
|
||||
expect(element.text()).toEqual('doug:d:first|frodo:f:middle|misko:m:middle|shyam:s:last|');
|
||||
expect(element.text()).
|
||||
toEqual('doug:d:true-false-false|' +
|
||||
'frodo:f:false-true-false|' +
|
||||
'misko:m:false-true-false|' +
|
||||
'shyam:s:false-false-true|');
|
||||
|
||||
delete $rootScope.items.doug;
|
||||
delete $rootScope.items.frodo;
|
||||
$rootScope.$digest();
|
||||
expect(element.text()).toEqual('misko:m:first|shyam:s:last|');
|
||||
expect(element.text()).toEqual('misko:m:true-false-false|shyam:s:false-false-true|');
|
||||
|
||||
delete $rootScope.items.shyam;
|
||||
$rootScope.$digest();
|
||||
expect(element.text()).toEqual('misko:m:true-false-true|');
|
||||
}));
|
||||
|
||||
|
||||
|
|
@ -207,7 +223,7 @@ describe('ngRepeat', function() {
|
|||
beforeEach(inject(function($rootScope, $compile) {
|
||||
element = $compile(
|
||||
'<ul>' +
|
||||
'<li ng-repeat="item in items" ng-bind="key + \':\' + val + \':\' + $position + \'|\'"></li>' +
|
||||
'<li ng-repeat="item in items">{{key}}:{{val}}|></li>' +
|
||||
'</ul>')($rootScope);
|
||||
a = {};
|
||||
b = {};
|
||||
|
|
|
|||
Loading…
Reference in a new issue