aboutsummaryrefslogtreecommitdiffstats
path: root/src/ng/directive/ngRepeat.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/ng/directive/ngRepeat.js')
-rw-r--r--src/ng/directive/ngRepeat.js29
1 files changed, 23 insertions, 6 deletions
diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js
index a00bc9e4..fada0696 100644
--- a/src/ng/directive/ngRepeat.js
+++ b/src/ng/directive/ngRepeat.js
@@ -16,6 +16,13 @@
* * `$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.
*
+ * Additionally, you can also provide animations via the ngAnimate attribute to animate the **enter**,
+ * **leave** and **move** effects.
+ *
+ * @animations
+ * enter - when a new item is added to the list or when an item is revealed after a filter
+ * leave - when an item is removed from the list or when an item is filtered out
+ * move - when an adjacent item is filtered out causing a reorder or when the item contents are reordered
*
* @element ANY
* @scope
@@ -75,13 +82,15 @@
</doc:scenario>
</doc:example>
*/
-var ngRepeatDirective = ['$parse', function($parse) {
+var ngRepeatDirective = ['$parse', '$animator', function($parse, $animator) {
+ var NG_REMOVED = '$$NG_REMOVED';
return {
transclude: 'element',
priority: 1000,
terminal: true,
compile: function(element, attr, linker) {
return function($scope, $element, $attr){
+ var animate = $animator($scope, $attr);
var expression = $attr.ngRepeat;
var match = expression.match(/^\s*(.+)\s+in\s+(.*?)\s*(\s+track\s+by\s+(.+)\s*)?$/),
trackByExp, hashExpFn, trackByIdFn, lhs, rhs, valueIdentifier, keyIdentifier,
@@ -130,6 +139,7 @@ var ngRepeatDirective = ['$parse', function($parse) {
$scope.$watchCollection(rhs, function ngRepeatAction(collection){
var index, length,
cursor = $element, // current position of the node
+ nextCursor,
// Same as lastBlockMap but it has the current state. It will become the
// lastBlockMap on the next iteration.
nextBlockMap = {},
@@ -184,7 +194,8 @@ var ngRepeatDirective = ['$parse', function($parse) {
for (key in lastBlockMap) {
if (lastBlockMap.hasOwnProperty(key)) {
block = lastBlockMap[key];
- block.element.remove();
+ animate.leave(block.element);
+ block.element[0][NG_REMOVED] = true;
block.scope.$destroy();
}
}
@@ -200,12 +211,17 @@ var ngRepeatDirective = ['$parse', function($parse) {
// associated scope/element
childScope = block.scope;
- if (block.element == cursor) {
+ nextCursor = cursor[0];
+ do {
+ nextCursor = nextCursor.nextSibling;
+ } while(nextCursor && nextCursor[NG_REMOVED]);
+
+ if (block.element[0] == nextCursor) {
// do nothing
cursor = block.element;
} else {
// existing item which got moved
- cursor.after(block.element);
+ animate.move(block.element, null, cursor);
cursor = block.element;
}
} else {
@@ -221,8 +237,8 @@ var ngRepeatDirective = ['$parse', function($parse) {
childScope.$middle = !(childScope.$first || childScope.$last);
if (!block.element) {
- linker(childScope, function(clone){
- cursor.after(clone);
+ linker(childScope, function(clone) {
+ animate.enter(clone, null, cursor);
cursor = clone;
block.scope = childScope;
block.element = clone;
@@ -236,3 +252,4 @@ var ngRepeatDirective = ['$parse', function($parse) {
}
};
}];
+