AngularJS中固定ng-repeat键值显示位置的方法及1.4.2版本异常排查

核心解决方案 #

别再用嵌套ng-repeat遍历对象键来生成单元格了——这种方式完全依赖AngularJS版本对对象属性遍历顺序的处理逻辑，很不稳定。直接在每个<td>里绑定固定的属性名，就能确保class值稳稳显示在"Class"列，mark值固定在"Percentage(%)"列，不管对象里的键顺序怎么变，也不管Angular版本是1.2还是1.4，都不会出错。

修正后的HTML代码：

<div class="widget-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr bolder>
<th class="bordered bg-primary" style="color:#fff">Class</th>
<th class="bordered bg-primary" style="color:#fff">Percentage(%)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in predictediveData">
  <!-- 直接绑定固定属性，彻底摆脱遍历顺序的依赖 -->
  <td><p>{{item.class}}</p></td>
  <td><p>{{item.mark}}</p></td>
</tr>
</tbody>
</table>
</div>
</div>

版本差异导致错乱的原因 #

• AngularJS 1.2.x：ng-repeat遍历对象属性的顺序完全跟着浏览器的for...in循环走，部分旧浏览器（比如早期Chrome）会保留属性的插入顺序，所以你的测试数据在这个版本下刚好显示正常——但这纯属巧合，换个浏览器说不定就乱了。
• AngularJS 1.4.x+：为了统一跨浏览器的表现，AngularJS修改了ng-repeat的遍历逻辑：它会先把对象的按键按字母顺序排序，再进行遍历。比如class会排在mark前面（因为字母"c"在"m"之前），这就导致原本依赖插入顺序的嵌套遍历彻底失效，出现列错位的问题。

额外提醒 #

这种直接绑定固定属性的写法，不仅解决了版本兼容问题，还让代码更清晰——毕竟你的表格结构是固定的，动态遍历对象键反而会引入没必要的不确定性，维护起来也麻烦。

内容的提问来源于stack exchange，提问作者Varun Sharma