AngularJS orderBy 数组索引

Posted 2023-03-05

【中文标题】AngularJS orderBy 数组索引

【英文标题】：AngularJS orderBy array index

【发布时间】：2014-09-26 17:25:46

【问题描述】：

我有一个看起来像这样的 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/

【问题讨论】：

这可能会有所帮助：***.com/questions/18124665

【参考方案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://***.com/a/18186947/3641016

但他使用命名属性。

【参考方案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

【讨论】：

我刚刚花了很长时间查看 Angular 文档，但无法让它为我工作，所以来到 ***。这不是一个答案，所以不要将它作为一个答案来呈现。是像你这样的人毁了这些社区，他们花时间在问题上挑毛病，而不是提供有用的答案。

好吧，对不起。我会编辑我的答案

【参考方案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/

【讨论】：

刚刚注意到您更改了数组结构。数组中的每个索引都被命名，这似乎是导致问题的原因。这就是我最初在重复中使用键和值的原因。删除数组名称不是一种选择。你能编辑你的答案以适应吗？我似乎无法让您的解决方案使用正确的数组。

像您这样使用对象将不允许您订购输出。你应该使用数组，而不是对象。