| OLD | NEW |
| (Empty) |
| 1 part of angular.directive; | |
| 2 | |
| 3 class _Row { | |
| 4 var id; | |
| 5 Scope scope; | |
| 6 Block block; | |
| 7 dom.Element startNode; | |
| 8 dom.Element endNode; | |
| 9 List<dom.Element> elements; | |
| 10 | |
| 11 _Row(this.id); | |
| 12 } | |
| 13 | |
| 14 /** | |
| 15 * The `ngRepeat` directive instantiates a template once per item from a | |
| 16 * collection. Each template instance gets its own scope, where the given loop | |
| 17 * variable is set to the current collection item, and `$index` is set to the | |
| 18 * item index or key. | |
| 19 * | |
| 20 * Special properties are exposed on the local scope of each template instance, | |
| 21 * including: | |
| 22 * | |
| 23 * <table> | |
| 24 * <tr><th> Variable </th><th> Type </th><th> Details
<th></tr> | |
| 25 * <tr><td> `$index` </td><td>[num] </td><td> iterator offset of the repeated e
lement (0..length-1) <td></tr> | |
| 26 * <tr><td> `$first` </td><td>[bool]</td><td> true if the repeated element is f
irst in the iterator. <td></tr> | |
| 27 * <tr><td> `$middle` </td><td>[bool]</td><td> true if the repeated element is b
etween the first and last in the iterator. <td></tr> | |
| 28 * <tr><td> `$last` </td><td>[bool]</td><td> true if the repeated element is l
ast in the iterator. <td></tr> | |
| 29 * <tr><td> `$even` </td><td>[bool]</td><td> true if the iterator position `$i
ndex` is even (otherwise false). <td></tr> | |
| 30 * <tr><td> `$odd` </td><td>[bool]</td><td> true if the iterator position `$i
ndex` is odd (otherwise false). <td></tr> | |
| 31 * </table> | |
| 32 * | |
| 33 * | |
| 34 * [repeat_expression] ngRepeat The expression indicating how to enumerate a | |
| 35 * collection. These formats are currently supported: | |
| 36 * | |
| 37 * * `variable in expression` – where variable is the user defined loop | |
| 38 * variable and `expression` is a scope expression giving the collection to | |
| 39 * enumerate. | |
| 40 * | |
| 41 * For example: `album in artist.albums`. | |
| 42 * | |
| 43 * * `variable in expression track by tracking_expression` – You can also | |
| 44 * provide an optional tracking function which can be used to associate the | |
| 45 * objects in the collection with the DOM elements. If no tracking function is | |
| 46 * specified the ng-repeat associates elements by identity in the collection. | |
| 47 * It is an error to have more than one tracking function to resolve to the | |
| 48 * same key. (This would mean that two distinct objects are mapped to the same | |
| 49 * DOM element, which is not possible.) Filters should be applied to the | |
| 50 * expression, before specifying a tracking expression. | |
| 51 * | |
| 52 * For example: `item in items` is equivalent to `item in items track by | |
| 53 * $id(item)`. This implies that the DOM elements will be associated by item | |
| 54 * identity in the array. | |
| 55 * | |
| 56 * For example: `item in items track by $id(item)`. A built in `$id()` | |
| 57 * function can be used to assign a unique `$$hashKey` property to each item | |
| 58 * in the array. This property is then used as a key to associated DOM | |
| 59 * elements with the corresponding item in the array by identity. Moving the | |
| 60 * same object in array would move the DOM element in the same way ian the | |
| 61 * DOM. | |
| 62 * | |
| 63 * For example: `item in items track by item.id` is a typical pattern when | |
| 64 * the items come from the database. In this case the object identity does | |
| 65 * not matter. Two objects are considered equivalent as long as their `id` | |
| 66 * property is same. | |
| 67 * | |
| 68 * For example: `item in items | filter:searchText track by item.id` is a | |
| 69 * pattern that might be used to apply a filter to items in conjunction with | |
| 70 * a tracking expression. | |
| 71 * | |
| 72 * # Example: | |
| 73 * | |
| 74 * <ul> | |
| 75 * <li ng-repeat="item in ['foo', 'bar', 'baz']">{{item}}</li> | |
| 76 * </ul> | |
| 77 */ | |
| 78 | |
| 79 @NgDirective( | |
| 80 children: NgAnnotation.TRANSCLUDE_CHILDREN, | |
| 81 selector: '[ng-repeat]', | |
| 82 map: const {'.': '@expression'}) | |
| 83 class NgRepeatDirective extends AbstractNgRepeatDirective { | |
| 84 NgRepeatDirective(BlockHole blockHole, | |
| 85 BoundBlockFactory boundBlockFactory, | |
| 86 Scope scope, | |
| 87 Parser parser, | |
| 88 AstParser astParser) | |
| 89 : super(blockHole, boundBlockFactory, scope, parser, astParser); | |
| 90 } | |
| 91 | |
| 92 /** | |
| 93 * *EXPERIMENTAL:* This feature is experimental. We reserve the right to change | |
| 94 * or delete it. | |
| 95 * | |
| 96 * [ng-shallow-repeat] is same as [ng-repeat] with some tradeoffs designed for | |
| 97 * speed. Use [ng-shallow-repeat] when you expect that your items you are | |
| 98 * repeating over do not change during the repeater lifetime. | |
| 99 * | |
| 100 * The shallow repeater introduces these changes: | |
| 101 * | |
| 102 * * The repeater only fires if the identity of the list changes or if the list | |
| 103 * [length] property changes. This means that the repeater will still see | |
| 104 * additions and deletions but not changes to the array. | |
| 105 * * The child scopes for each item are created in the lazy mode | |
| 106 * (see [Scope.$new]). This means the scopes are effectively taken out of the | |
| 107 * digest cycle and will not update on changes to the model. | |
| 108 * | |
| 109 */ | |
| 110 @deprecated | |
| 111 @NgDirective( | |
| 112 children: NgAnnotation.TRANSCLUDE_CHILDREN, | |
| 113 selector: '[ng-shallow-repeat]', | |
| 114 map: const {'.': '@expression'}) | |
| 115 //TODO(misko): delete me, since we can no longer do shallow digest. | |
| 116 class NgShallowRepeatDirective extends AbstractNgRepeatDirective { | |
| 117 NgShallowRepeatDirective(BlockHole blockHole, | |
| 118 BoundBlockFactory boundBlockFactory, | |
| 119 Scope scope, | |
| 120 Parser parser, | |
| 121 AstParser astParser) | |
| 122 : super(blockHole, boundBlockFactory, scope, parser, astParser) | |
| 123 { | |
| 124 print('DEPRECATED: [ng-shallow-repeat] use [ng-repeat]'); | |
| 125 } | |
| 126 } | |
| 127 | |
| 128 abstract class AbstractNgRepeatDirective { | |
| 129 static RegExp _SYNTAX = new RegExp(r'^\s*(.+)\s+in\s+(.*?)\s*(\s+track\s+by\s+
(.+)\s*)?(\s+lazily\s*)?$'); | |
| 130 static RegExp _LHS_SYNTAX = new RegExp(r'^(?:([\$\w]+)|\(([\$\w]+)\s*,\s*([\$\
w]+)\))$'); | |
| 131 | |
| 132 final BlockHole _blockHole; | |
| 133 final BoundBlockFactory _boundBlockFactory; | |
| 134 final Scope _scope; | |
| 135 final Parser _parser; | |
| 136 final AstParser _astParser; | |
| 137 | |
| 138 String _expression; | |
| 139 String _valueIdentifier; | |
| 140 String _keyIdentifier; | |
| 141 String _listExpr; | |
| 142 Map<dynamic, _Row> _rows = {}; | |
| 143 Function _trackByIdFn = (key, value, index) => value; | |
| 144 Watch _watch = null; | |
| 145 Iterable _lastCollection; | |
| 146 | |
| 147 AbstractNgRepeatDirective(this._blockHole, this._boundBlockFactory, | |
| 148 this._scope, this._parser, this._astParser); | |
| 149 | |
| 150 set expression(value) { | |
| 151 _expression = value; | |
| 152 if (_watch != null) _watch.remove(); | |
| 153 Match match = _SYNTAX.firstMatch(_expression); | |
| 154 if (match == null) { | |
| 155 throw "[NgErr7] ngRepeat error! Expected expression in form of '_item_ " | |
| 156 "in _collection_[ track by _id_]' but got '$_expression'."; | |
| 157 } | |
| 158 _listExpr = match.group(2); | |
| 159 var trackByExpr = match.group(4); | |
| 160 if (trackByExpr != null) { | |
| 161 Expression trackBy = _parser(trackByExpr); | |
| 162 _trackByIdFn = ((key, value, index) { | |
| 163 final trackByLocals = <String, Object>{}; | |
| 164 if (_keyIdentifier != null) trackByLocals[_keyIdentifier] = key; | |
| 165 trackByLocals | |
| 166 ..[_valueIdentifier] = value | |
| 167 ..[r'$index'] = index | |
| 168 ..[r'$id'] = (obj) => obj; | |
| 169 return relaxFnArgs(trackBy.eval)(new ScopeLocals(_scope.context, trackBy
Locals)); | |
| 170 }); | |
| 171 } | |
| 172 var assignExpr = match.group(1); | |
| 173 match = _LHS_SYNTAX.firstMatch(assignExpr); | |
| 174 if (match == null) { | |
| 175 throw "[NgErr8] ngRepeat error! '_item_' in '_item_ in _collection_' " | |
| 176 "should be an identifier or '(_key_, _value_)' expression, but got " | |
| 177 "'$assignExpr'."; | |
| 178 } | |
| 179 _valueIdentifier = match.group(3); | |
| 180 if (_valueIdentifier == null) _valueIdentifier = match.group(1); | |
| 181 _keyIdentifier = match.group(2); | |
| 182 | |
| 183 _watch = _scope.watch( | |
| 184 _astParser(_listExpr, collection: true), | |
| 185 (CollectionChangeRecord collection, _) { | |
| 186 //TODO(misko): we should take advantage of the CollectionChangeRecord! | |
| 187 _onCollectionChange(collection == null ? [] : collection.iterable); | |
| 188 } | |
| 189 ); | |
| 190 } | |
| 191 | |
| 192 List<_Row> _computeNewRows(Iterable collection, trackById) { | |
| 193 final newRowOrder = new List<_Row>(collection.length); | |
| 194 // Same as lastBlockMap but it has the current state. It will become the | |
| 195 // lastBlockMap on the next iteration. | |
| 196 final newRows = <dynamic, _Row>{}; | |
| 197 // locate existing items | |
| 198 for (var index = 0; index < newRowOrder.length; index++) { | |
| 199 var value = collection.elementAt(index); | |
| 200 trackById = _trackByIdFn(index, value, index); | |
| 201 if (_rows.containsKey(trackById)) { | |
| 202 var row = _rows[trackById]; | |
| 203 _rows.remove(trackById); | |
| 204 newRows[trackById] = row; | |
| 205 newRowOrder[index] = row; | |
| 206 } else if (newRows.containsKey(trackById)) { | |
| 207 // restore lastBlockMap | |
| 208 newRowOrder.forEach((row) { | |
| 209 if (row != null && row.startNode != null) _rows[row.id] = row; | |
| 210 }); | |
| 211 // This is a duplicate and we need to throw an error | |
| 212 throw "[NgErr50] ngRepeat error! Duplicates in a repeater are not " | |
| 213 "allowed. Use 'track by' expression to specify unique keys. " | |
| 214 "Repeater: $_expression, Duplicate key: $trackById"; | |
| 215 } else { | |
| 216 // new never before seen row | |
| 217 newRowOrder[index] = new _Row(trackById); | |
| 218 newRows[trackById] = null; | |
| 219 } | |
| 220 } | |
| 221 // remove existing items | |
| 222 _rows.forEach((key, row) { | |
| 223 row.block.remove(); | |
| 224 row.scope.destroy(); | |
| 225 }); | |
| 226 _rows = newRows; | |
| 227 return newRowOrder; | |
| 228 } | |
| 229 | |
| 230 _onCollectionChange(Iterable collection) { | |
| 231 dom.Node previousNode = _blockHole.elements[0]; // current position of the n
ode | |
| 232 dom.Node nextNode; | |
| 233 Scope childScope; | |
| 234 Map childContext; | |
| 235 Scope trackById; | |
| 236 ElementWrapper cursor = _blockHole; | |
| 237 | |
| 238 List<_Row> newRowOrder = _computeNewRows(collection, trackById); | |
| 239 | |
| 240 for (var index = 0; index < collection.length; index++) { | |
| 241 var value = collection.elementAt(index); | |
| 242 _Row row = newRowOrder[index]; | |
| 243 | |
| 244 if (row.startNode != null) { | |
| 245 // if we have already seen this object, then we need to reuse the | |
| 246 // associated scope/element | |
| 247 childScope = row.scope; | |
| 248 childContext = childScope.context as Map; | |
| 249 | |
| 250 nextNode = previousNode; | |
| 251 do { | |
| 252 nextNode = nextNode.nextNode; | |
| 253 } while(nextNode != null); | |
| 254 | |
| 255 // existing item which got moved | |
| 256 if (row.startNode != nextNode) row.block.moveAfter(cursor); | |
| 257 previousNode = row.endNode; | |
| 258 } else { | |
| 259 // new item which we don't know about | |
| 260 childScope = _scope.createChild(childContext = new PrototypeMap(_scope.c
ontext)); | |
| 261 } | |
| 262 | |
| 263 if (!identical(childScope.context[_valueIdentifier], value)) { | |
| 264 childContext[_valueIdentifier] = value; | |
| 265 } | |
| 266 var first = (index == 0); | |
| 267 var last = (index == collection.length - 1); | |
| 268 childContext | |
| 269 ..[r'$index'] = index | |
| 270 ..[r'$first'] = first | |
| 271 ..[r'$last'] = last | |
| 272 ..[r'$middle'] = !first && !last | |
| 273 ..[r'$odd'] = index & 1 == 1 | |
| 274 ..[r'$even'] = index & 1 == 0; | |
| 275 | |
| 276 if (row.startNode == null) { | |
| 277 var block = _boundBlockFactory(childScope); | |
| 278 _rows[row.id] = row | |
| 279 ..block = block | |
| 280 ..scope = childScope | |
| 281 ..elements = block.elements | |
| 282 ..startNode = row.elements[0] | |
| 283 ..endNode = row.elements[row.elements.length - 1]; | |
| 284 block.insertAfter(cursor); | |
| 285 } | |
| 286 cursor = row.block; | |
| 287 } | |
| 288 } | |
| 289 } | |
| OLD | NEW |