我正在尝试构建我的第一个 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 }} 的任何内容。
我做错了什么?
谢谢。
最佳答案
在 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;
执行完毕后才能在列表中找到食物项。
关于javascript - 通过数组迭代设置 $scope 属性值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26290433/