Question

我希望绑定动态数据，在绑定数据后，数据的顺序会发生变化

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：image url here

Answer 1

是的，如果您使用更高版本解决此问题，则问题将得到解决（例如＆gt; 1.5.3）。

Working Demo

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

From migration doc：

由于c260e738，以前是使用ngRepeat时的项目顺序   迭代对象属性保证一致   将键排序为字母顺序。

现在，项目的顺序取决于浏览器，具体取决于订单   使用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或某些   其他机制，然后按照您需要的顺序手动对它们进行排序。

Answer 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>

Answer 3

当我将角度版本1.2.23更改为1.5.3

时，问题就解决了

对象的顺序改变了

3 个答案: