javascript - 通过数组迭代设置 $scope 属性值

Question

我正在尝试构建我的第一个 Angular 应用程序，但遇到了问题:

(function() {

var ItemController = function($scope, $routeParams, $log, foodFactory) {
    var foodId = $routeParams.foodId;
    $scope.food = [];
    $scope.item;

    function init() {
        foodFactory.getFoods()
            .success(function(foods) {
                $scope.food = foods;
            })
            .error(function(data, status, headers, config) {
               //handle error
            });
    }

    init();

    for (var i = 0, len = $scope.food.length; i < len; i++) {
        if (foodId == $scope.food[i].id) {
            $scope.item = $scope.food[i];
        }
    }

};
angular.module('paleoApp')
    .controller('ItemController', ['$scope', '$routeParams', '$log', 'foodFactory', ItemController]);

})();

代码正确地将 $scope.food 设置为 foodFactory 从 JSON 文件中提取的对象数组，并且当使用 {{ food }} 时， View 也正确显示该数组。为了在数组中获取正确的对象，我尝试循环遍历 $scope.food 以查找具有与 foodId 匹配的属性“id”的对象，以便将该对象分配给 $scope.item。但是，该 View 不会显示 {{ item }} 的任何内容。

我做错了什么？

谢谢。

Answer 1

在 init 方法中，getFoods() 调用似乎是异步的，但您在调用完成之前会迭代 $scope.food。您应该能够执行如下操作:

var ItemController = function($scope, $routeParams, $log, foodFactory) {
    var foodId = $routeParams.foodId;
    $scope.food = [];
    $scope.item;

    function init() {
        return foodFactory.getFoods()
            .success(function(foods) {
                $scope.food = foods;
            })
            .error(function(data, status, headers, config) {
               //handle error
            });
    }

    init().then(function() {
        for (var i = 0, len = $scope.food.length; i < len; i++) {
            if (foodId == $scope.food[i].id) {
                $scope.item = $scope.food[i];
            }
        }
    });
};

这里的 init 方法返回一个 promise 。当您调用 init().then 时，您会等到 $scope.food = food; 执行完毕后才能在列表中找到食物项。