javascript - Angular ngRepeat orderBy 对象中的顺序

Question

我有以下 JSON 数据，我希望 Angular 为 Specification 内的每个 key 执行 ngRepeat 并显示在与它们在对象中的顺序相同:

"Specification": {
    "Screen": "15.4\" Retina display",
    "Resolution": "2880 x 1800",
    "HDD": "512GB SSD",
    "RAM": "16GB RAM",
    "CPU": "Intel Core i7 2.30 Ghz Processor",
    "Software": "Mac OS X 10.9 Mavericks"
}

这是我的 HTML:

<ul>
    <li ng-repeat="(key, value) in selectedProduct.Specification">
        <span ng-class="{{key | lowercase}}">{{value}}</span>
    </li>
</ul>

上面的代码以随机顺序输出数据，而不是按照数组中出现的顺序。

Answer 1

某些浏览器(例如 Chrome)会按字母顺序重新排列按键，因此没有可靠的跨浏览器方法来保留对象的按键顺序。您应该将其转换为数组，或者单独指定键顺序(例如作为单独的数组)。

<小时/>

更新

正如 runTurm 正确指出的那样，在 ngRepeat 中，具体的键是按 Angular 的字母顺序排序的。因此，保留特定顺序的最简单方法是使用单独的数组以所需的顺序保存键:

/* CONTROLLER: */
$scope.keys = ["Screen", "Resolution", "HDD", "RAM", "CPU", "Software"];
$scope.selectedProduct = {
    Specification: {
        ...
    },
    ...
};

<!-- VIEW: -->
<ul>
    <li ng-repeat="key in keys">
        <span class="{{key | lowercase}}">{{selectedProduct.Specification[key]}}</span>
    </li>
</ul>

<小时/>

如果您发现它更具可读性，或者您计划在多个位置使用 selectedProduct.Specification[key]，您可以使用 ngInit 将其别名为 值:

    <li ng-repeat="key in keys" ng-init="value=selectedProduct.Specification[key]">
        <span class="{{key | lowercase}}">{{value}}</span>
    </li>

<小时/>

另请参阅此 short demo 。