javascript - 在 AngularJS 中，如何指定二次排序？

Question

下面的代码改编自 AngularJS 教程的第 4 步(http://docs.angularjs.org/tutorial/step_04)

我可以使用数组在 controller.js 代码中指定次要排序。它在负载上运行良好。

我认为，模板就是问题所在。我不知道如何设置 Angular 可以正确识别过滤器的数组。如前所述，主要和次要排序在负载上运行良好。但是，当您查看组合框时，它错误地具有第三个选项，并且当您将 Order By 组合框更改为“最新”时，结果排序是错误的。

这是一个显示问题的 JSfiddle(请参阅 HTML 的第 8 行和 Javascript 的第 26 行): http://jsfiddle.net/M6JLe/6/

如果你更喜欢查看代码，这里是:

<!-- template -->
<div ng-app='phonecatApp'>
    <div ng-controller="PhoneListCtrl">
        Search: <input ng-model="query"><br />
        OrderProp: {{orderProp}}<br />
        Sort by: 
       <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="['age','name']">Newest</option>
       </select>

       <br />

       <ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            {{phone.name}}
            <p>{{phone.snippet}} ({{phone.age}})</p>
          </li>
       </ul>



// Javascript
    'use strict';

    /* Controllers */

    var phonecatApp = angular.module('phonecatApp', []);

    phonecatApp.controller('PhoneListCtrl', function($scope) {
      $scope.phones = [
        {'name': 'Nexus S',
         'snippet': 'Fast just got faster with Nexus S.',
         'age': 4},
        {'name': 'Motorola XOOM™ with Wi-Fi',
         'snippet': 'The Next, Next Generation tablet.',
         'age': 2},
        {'name': 'Motorola XOOM™',
         'snippet': 'The Next, Next Generation tablet.',
         'age': 3},
        {'name': 'Apple iPhone 5s',
         'snippet': 'Apple\'s newest smartphone',
         'age': 3},
        {'name': 'ABC Phone X',
         'snippet': 'Some text snippet',
         'age': 3}
      ];

      $scope.orderProp = ['age','name'];
    });

Answer 1

正如您已经意识到的那样，问题在于选择选项是字符串，而您将 orderProp 用作数组。使这项工作可行的一种方法(不一定是最好的方法):

修改您的 HTML:

<select ng-model="orderProp">
    <option value="name">Alphabetical</option>
    <option value="age,name">Newest</option>
</select>
<br />
<ul class="phones">
    <li ng-repeat="phone in phones | filter:query | orderBy:getOrder()">{{phone.name}}
        <p>{{phone.snippet}} ({{phone.age}})</p>
    </li>
</ul>

修改你的 Controller :

$scope.orderProp = "age,name";
$scope.getOrder = function () {
    var tokens = $scope.orderProp.split(",");
    var order = [];
    tokens.forEach(function (token) {
        order.push(token.toString());
    });

    return order;
};

参见 working example .