重新排序angularjs ngRepeat与后续数据结果

re-sort angularjs ngRepeat with subsequent data results

本文关键字：数据 结果 ngRepeat angularjs 新排序 排序      更新时间：2023-12-25

我有一个案例，需要重复来自各种ajax源的结果。我不能等待所有源加载后再渲染，我必须在结果出现时渲染。但我希望结果按特定顺序（按字母顺序排列）。ngRepeat如果所有结果同时出现，则会对它们进行相应的排序，但如果它们是异步加载的，则不会。

加载所有结果后，如何对重复进行重新排序？

我在这里创建了一个plunkr来模拟异步ajax和我得到的无序结果。

这里有一个过于简化、有些做作的示例，说明我正在做的事情（仅用于说明目的，因为SO需要代码）。

// ngRepeat over $scope.prices in correct order
// all ajax loaded then $scope.prices assigned
var priority = ['1 Day', '3 Day', 'Ground'];
var prices = {};
for(var i = 0; i < priority.length; ++i) {
    $http.get('some/endpoint/' + priority[i])
    .then(function(response) {
        prices[priority[i]] = response.data;
    });
}
$scope.prices = {
    '1 Day': prices['1 Day'],
    '3 Day': prices['3 Day'],
    'Ground': prices['Ground']
};
// ngRepeat over $scope.prices in order of successful load
// $scope.prices keys assigned as results are available
var priority = ['1 Day', '3 Day', 'Ground'];
for(var i = 0; i < priority.length; ++i) {
    $http.get('some/endpoint/' + priority[i])
    .then(function(response) {
        $scope.prices[priority[i]] = response.data;
    });
}

在main.html中，您可以使用angular 提供的orderBy函数

    <ul>
  <li ng-repeat="(priority, rates) in prices">
    <h2>{{priority}}</h2>
    <ul>
      <li ng-repeat="prices in rates | orderBy:'price'">{{prices.price}}</li>
    </ul>
  </li>
</ul>

这将获取数组，并对输出进行排序

您能使用订单并为每个价格对象（1天、2天、地面）等应用一个值吗？

至于渲染，当更新列表时，是否可以在单击时重复刷新ng，并可能应用淡入/淡出？

相关文章：