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}}时也正确显示数组。为了在数组中获取正确的对象，我尝试循环遍历$ scope.food以找到具有属性＆＃39; id＆＃39;匹配foodId以将该对象分配给$ scope.item。但是，该视图不会显示{{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 = foods;已经执行，然后才能在列表中找到食物项目。

通过遍历数组设置$ scope属性值

1 个答案: