fix(ngRepeat): do not sort object keys alphabetically

BREAKING CHANGE:

Previously, the order of items when using ngRepeat to iterate
over object properties was guaranteed to be consistent by sorting the
keys into alphabetic order.

Now, the order of the items is browser dependent based on the order returned
from iterating over the object using the `for key in obj` syntax.

It seems that browsers generally follow the strategy of providing
keys in the order in which they were defined, although there are exceptions
when keys are deleted and reinstated. See
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete#Cross-browser_issues

The best approach is to convert Objects into Arrays by a filter such as
https://github.com/petebacondarwin/angular-toArrayFilter
or some other mechanism, and then sort them manually in the order you need.

Closes #6210
Closes #10538

Author: caitp

src/ng/directive/ngRepeat.js

@@ -23,6 +23,31 @@
  * Creating aliases for these properties is possible with {@link ng.directive:ngInit `ngInit`}.
  * This may be useful when, for instance, nesting ngRepeats.
  *
+ *
+ * # Iterating over object properties
+ *
+ * It is possible to get `ngRepeat` to iterate over the properties of an object using the following
+ * syntax:
+ *
+ * ```js
+ * <div ng-repeat="(key, value) in myObj"> ... </div>
+ * ```
+ *
+ * You need to be aware that the JavaScript specification does not define what order
+ * it will return the keys for an object. (To mitigate this in Angular 1.3 the `ngRepeat` directive
+ * used to sort the keys alphabetically.)
+ *
+ * Version 1.4 removed the alphabetic sorting. We now rely on the order returned by the browser
+ * when running `for key in myObj`. It seems that browsers generally follow the strategy of providing
+ * keys in the order in which they were defined, although there are exceptions when keys are deleted
+ * and reinstated. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete#Cross-browser_issues
+ *
+ * If this is not desired, the recommended workaround is to convert your object into an array
+ * that is sorted into the order that you prefer before providing it to `ngRepeat`.  You could
+ * do this with a filter such as [toArrayFilter](http://ngmodules.org/modules/angular-toArrayFilter)
+ * or implement a `$watch` on the object yourself.
+ *
+ *
  * # Special repeat start and end points
  * To repeat a series of elements instead of just one parent element, ngRepeat (as well as other ng directives) supports extending
  * the range of the repeater by defining explicit start and end points by using **ng-repeat-start** and **ng-repeat-end** respectively.
@@ -335,14 +360,13 @@ var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) {
             trackByIdFn = trackByIdExpFn || trackByIdArrayFn;
           } else {
             trackByIdFn = trackByIdExpFn || trackByIdObjFn;
-            // if object, extract keys, sort them and use to determine order of iteration over obj props
+            // if object, extract keys, in enumeration order, unsorted
             collectionKeys = [];
             for (var itemKey in collection) {
-              if (collection.hasOwnProperty(itemKey) && itemKey.charAt(0) != '$') {
+              if (collection.hasOwnProperty(itemKey) && itemKey.charAt(0) !== '$') {
                 collectionKeys.push(itemKey);
               }
             }
-            collectionKeys.sort();
           }
 
           collectionLength = collectionKeys.length;
@@ -438,4 +462,3 @@ var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) {
     }
   };
 }];
-

test/ng/directive/ngRepeatSpec.js

@@ -163,7 +163,7 @@ describe('ngRepeat', function() {
       '</ul>')(scope);
     scope.items = {age:20, wealth:20, prodname: "Bingo", dogname: "Bingo", codename: "20"};
     scope.$digest();
-    expect(element.text()).toEqual('age:20|codename:20|dogname:Bingo|prodname:Bingo|wealth:20|');
+    expect(element.text()).toEqual('age:20|wealth:20|prodname:Bingo|dogname:Bingo|codename:20|');
   });
 
   describe('track by', function() {
@@ -587,7 +587,7 @@ describe('ngRepeat', function() {
       '</ul>')(scope);
     scope.items = {'misko':'m', 'shyam':'s', 'frodo':'f'};
     scope.$digest();
-    expect(element.text()).toEqual('frodo:f:0|misko:m:1|shyam:s:2|');
+    expect(element.text()).toEqual('misko:m:0|shyam:s:1|frodo:f:2|');
   });
 
 
@@ -656,10 +656,10 @@ describe('ngRepeat', function() {
     scope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f'};
     scope.$digest();
     expect(element.text()).
-        toEqual('doug:d:true-false-false|' +
-                'frodo:f:false-true-false|' +
-                'misko:m:false-true-false|' +
-                'shyam:s:false-false-true|');
+        toEqual('misko:m:true-false-false|' +
+                'shyam:s:false-true-false|' +
+                'doug:d:false-true-false|' +
+                'frodo:f:false-false-true|');
 
     delete scope.items.doug;
     delete scope.items.frodo;
@@ -681,15 +681,15 @@ describe('ngRepeat', function() {
     scope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f'};
     scope.$digest();
     expect(element.text()).
-        toBe('doug:d:true-false|' +
-                'frodo:f:false-true|' +
-                'misko:m:true-false|' +
-                'shyam:s:false-true|');
+        toBe('misko:m:true-false|' +
+                'shyam:s:false-true|' +
+                'doug:d:true-false|' +
+                'frodo:f:false-true|');
 
     delete scope.items.frodo;
     delete scope.items.shyam;
     scope.$digest();
-    expect(element.text()).toBe('doug:d:true-false|misko:m:false-true|');
+    expect(element.text()).toBe('misko:m:true-false|doug:d:false-true|');
   });
 
 
@@ -700,11 +700,12 @@ describe('ngRepeat', function() {
             '</ul>')(scope);
     scope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f', '$toBeFilteredOut': 'xxxx'};
     scope.$digest();
+
     expect(element.text()).
-        toEqual('doug:d:true-false-false|' +
-        'frodo:f:false-true-false|' +
-        'misko:m:false-true-false|' +
-        'shyam:s:false-false-true|');
+        toEqual('misko:m:true-false-false|' +
+        'shyam:s:false-true-false|' +
+        'doug:d:false-true-false|' +
+        'frodo:f:false-false-true|');
   });
 
 
@@ -716,10 +717,10 @@ describe('ngRepeat', function() {
     scope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f', '$toBeFilteredOut': 'xxxx'};
     scope.$digest();
     expect(element.text()).
-        toEqual('doug:d:true-false|' +
-        'frodo:f:false-true|' +
-        'misko:m:true-false|' +
-        'shyam:s:false-true|');
+        toEqual('misko:m:true-false|' +
+        'shyam:s:false-true|' +
+        'doug:d:true-false|' +
+        'frodo:f:false-true|');
   });