对象顺序改变答案

【问题标题】：Order of object is changed对象顺序改变
【发布时间】：2026-01-30 00:25:01
【问题描述】：

我要绑定动态数据，绑定数据后数据顺序变了

var app = angular.module("mainApp",  []);

app.controller('mainCtrl', function($scope){
    $scope.fieldNames = { author_name: "Author Name", about_author: "About author", author_image : "Author Image" };
    $scope.authors = [{author_name: 'akshay', about_author:'this is about author', author_image:'image url here'}];
  console.log($scope.authors);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">

    <div ng-repeat="author in authors" class="authorAndTagGroup">
      <div ng-repeat="(key, value) in author">
        <label class="col-sm-3 control-label">{{fieldNames[key]}}</label> 
        <input type="text" ng-model="author[key]">
      </div>
    </div>

</div>

我想像这样显示

作者姓名：akshay

关于作者：这是关于作者的

author_image : 此处为图片网址

【问题讨论】：

for..in 循环永远无法保证订单。因此，当您执行内部 ng-repeat 时，您会错过订单。您可以按照您想要的顺序显式绑定这些值。
在我看来，数据已按您预期的顺序显示。 See plnkr
@KhalidHussain 请运行 sn-p 它无法正常工作
@Jimbrooism 是的，在你的代码 sn-p 中它不起作用，but it is working in my plnkr。
@KhalidHussain 我发现了问题，sn-p 在角度 1.2.23 上运行，而 plnkr 在 1.5.3 中，如果您将 1.5.3 更改为 1.2.23，它将无法工作

标签： javascript angularjs json angularjs-ng-repeat

【解决方案1】：

是的，如果您使用已解决此问题的更高版本（例如-> 1.5.3），问题将得到解决。

Working Demo

我建议您查看迁移文档。它将帮助您避免未来的问题。

From migration doc:

由于c260e738，之前使用ngRepeat时的item顺序通过以下方式保证迭代对象属性是一致的按字母顺序对键进行排序。

现在，项目的顺序取决于浏览器的顺序从使用 for key in obj 迭代对象返回语法。

似乎浏览器普遍遵循提供密钥的策略按定义的顺序排列，但也有例外当密钥被删除和恢复时。看 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete#Cross-browser_issues

最好的方法是通过过滤器将对象转换为数组如https://github.com/petebacondarwin/angular-toArrayFilter 或一些其他机制，然后按照您需要的顺序手动排序。

【讨论】：

【解决方案2】：

您应该始终明确定义您的属性名称，因为无法保证每个（如 ng-repeat）循环的顺序。

所以我会推荐一个单循环（而不是嵌套循环），如下：

<div ng-repeat="author in authors" class="authorAndTagGroup">
    <label class="col-sm-3 control-label">Author Name</label> 
    <input type="text" ng-model="author_name">
    <label class="col-sm-3 control-label">About Author</label> 
    <input type="text" ng-model="about_author">
    <label class="col-sm-3 control-label">Author Image</label> 
    <input type="text" ng-model="author_image">
</div>

【讨论】：

【解决方案3】：

当我将 Angular 版本 1.2.23 更改为 1.5.3 时，问题得到解决

【讨论】：