如何仅在函数完成后进行渲染

Question

我在控制器中定义了一个对象列表，并在vm.init()之后对其进行排序，如下所示：

const myItems = [{},{},{}...{}]
vm.init().then(function() {
$scope.ajaxLoading = true;    // Loader
$scope.itemsToRender = [];
// Pushing items from myItems in this list according to some conditions
$scope.itemsToRender.sort(function(a, b) {
return a.order - b.order;
})
}).finally(function() {
$scope.ajaxLoading = false;
});

正如预期的那样，运行良好

但现在我从vm.init()中的api响应中获得myList，当我来到这个页面时，它不会对列表进行排序。但如果我重新加载页面，它会对列表进行排序并完美呈现。

我试着调试并将console.log放入函数中，然后调用了该函数。

我做错了什么？列表是否在排序完成之前呈现？我该如何解决这个问题？

Answer 1

AngularJS需要了解更改，以便消化和反映模板中的更改。您使用的sort()方法是Javascript，因此尽管将其直接应用于$scope.itemsToRender变量Angular仍然不知道其内容已经更改，可能是因为它使用了数组的长度等属性，因此如果长度没有更改，它将无法识别这些更改。

无论如何，我很确定你可以使用orderBy过滤器，它将为你处理所有这些，这是这种情况下的最佳实践

<tr ng-repeat="item in itemsToRender | orderBy:'id'">

https://docs.angularjs.org/api/ng/filter/orderBy