AngularJS orderBy 数组索引

Question

我有一个看起来像这样的 ng-repeat：

<div ng-app="questionnaire">
  <div ng-controller="QuestionnaireCtrl">

    <div ng-repeat="(key,val) in questions | orderBy:key">
      {{questions[key].question}}
      {{questions[key].answer}}
    </div>

  </div>
</div>

控制器如下所示：

(function(){
  var app = angular.module('questionnaire',[]);
  app.controller('QuestionnaireCtrl', function($scope){

    $scope.questions = {
      someItem: { question : 'First question' },
      anotherItem: { question : 'Next question here' },
      upgradeItem: { question : 'Another one' }
    };

  });
})();

现在 ng-repeat 可以正常工作，但会以随机顺序显示问题。我试过使用orderBy，但无法正常工作。我只希望问题和答案（当前不在数组中）按索引顺序显示（即它们在数组中的顺序）。或者，我可以将另一个字段“部分”添加到数组中，并按该顺序显示它们。例如

$scope.questions = {
  someItem: { question : 'First question', section : '1' },
  anotherItem: { question : 'Next question here', section : '1' },
  upgradeItem: { question : 'Another one', section : '2' }
};

这里的小提琴示例：http://jsfiddle.net/k52ez/

Answer 1

我为您的问题制作了一个自定义过滤器。

请查看您更新后的jsfiddle

html:

<div ng-repeat="question in questions | orderByKey">

javascript：

app.filter('orderByKey', [function () {
return function (input) {
    if (!angular.isUndefined(input)) {
        var tmpInput = [];
        angular.forEach(input, function(value, key){
            tmpInput.push(key);
        });
        tmpInput.sort();

        var tmpOutput = [];
        angular.forEach(tmpInput, function(key){
            tmpOutput.push(input[key]);
        });
        return tmpOutput;
    } else {
        return input;
    }
};

还有另一个线程：

https://stackoverflow.com/a/18186947/3641016

但他使用命名属性。

Answer 2

关于这个问题的 AngularJS 文档是精确的，并且适合您的确切用例。 ReadTheDocs

在一个对象中收集你的问题似乎是一件奇怪的事情。对象的属性没有顺序，所以 ngRepeat 也不应该知道。相反，您可能希望将问题放入有序的数据结构中，例如数组。

我在您的对象中的关键字段上使用 orderBy 表达式更新了您的小提琴。

JS：

$scope.questions = [
    {question : 'First question' , key: 3},
    { question : 'Next question here',  key: 2},
    { question : 'Another one', key: 1 }
];

HTML：

<div ng-repeat="question in questions | orderBy:'key'">

Fiddle

Answer 3

您不能依赖对象顺序，它没有定义。事实上，orderBy 过滤器应该只适用于数组。如果您需要排序输出，您应该使用数组作为questions：

$scope.questions = [
    {
        question: 'First question',
        section: 'someItem'
    },
    {
        question: 'Next question here',
        section: 'anotherItem'
    },
    {
        question: 'Another one',
        section: 'upgradeItem'
    }
];

而ngRepeat 变为：

<div ng-repeat="question in questions">{{question.question}} {{question.answer}}</div>

演示：http://jsfiddle.net/k52ez/2/