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但无法使用它。我只是希望问题和答案（当前不在数组中）以索引的顺序显示（即它们在数组中的顺序）。或者，我可以向数组中添加另一个字段“section”，并按顺序显示它们。 E.g。

$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

您不能依赖对象顺序，它未定义。实际上，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/

Answer 2

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

请参阅更新后的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 3

关于此事的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

AngularJS orderBy数组索引

3 个答案:

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