明确控制ng模型对象的顺序

Question

假设您有这样的输入：

<input type="text" ng-model="user.name">
<input type="text" ng-model="user.phone">
<input type="text" ng-model="user.email">

如果我输出模型，很多时候模型的顺序显然是随机的，特别是对于数据库中复杂的动态生成表单（上述模型在本问题中过于简化）。

例如：

{{user}}

通常会以这样的随机顺序输出：

{
 phone: '8888888888',
 email: 'email@domain.com',
 name: 'persons name'
}

我的问题是，如何明确控制对象内部元素的顺序？这样的事情会很完美：<input type="text" ng-model="user.name" model-position="1">

Answer 1

您可以在使用之前声明对象。因此，javascript将保留原始订单。

// controller code
$scope.user = {
    name: ''
    phone: '',
    email: ''
};

但是如果你有一个动态生成的对象，你必须用你想要的顺序重新生成对象。

Answer 2

保证订购对象键和值的最佳选择是自己指定。通常，最好的做法是将对象转换为键/值对数组，并使用过滤器确保以这种方式显示它。像这样：

angular.filter('specialFilter', function(object) {
  return Object.keys(object).sort().map(key => ({key: key, value: object[key] }) );
})

然后你可以在这样的模板中使用它：

{{user | special}}

如果你想以一种漂亮，可读的格式正确地显示用户对象，那么你需要做一些更有趣的事情，但这是基本的想法。