这对Angular来说真的很新,我有一个需要帮助的问题。基本上,我需要选择用户可以单击的项目。单击某个项目时,页面需要显示该项目具有的某些属性,例如其描述等。第一部分不是问题,但是第二部分却有麻烦,它正在显示数据。所以这是我所拥有的:
在前端,我有一个角度ng-click chooseItem(item)
函数,该函数将单击的item
作为其参数:
<div ng-repeat="item in items" class="col-xs-2 col-md-1">
<div ng-click="chooseItem(item)" class="thumbnail">
<img src="/images/items/{{item.name}}.png"/>
</div>
</div>
然后通过
items
函数将其传递给items.getChosenItemData(item)
工厂。由于实际物料数据存储在Mongo中而不是工厂中,因此此函数查询数据库以检索物料数据。检索到的数据存储在chosenItem
对象中,然后作为$scope.chosenItem
传递回控制器。app.factory('items', ['$http', function($http){
var objects = {
items: [
// ... more items before these
{name: "Pencil"},
{name: "Pen"}
/* I use these item objects as keys to the items themselves.
The ng-repeat iterates through all of the names for each item
which allows me to display static images for each item to the page.
There aren't many items, about 100, but they have tons of json information
so to hardcode it all into here is not an option
A way to do this without any hardcoding would be nice! */
// more items after these
],
// this is used to store a currently clicked item's values
chosenItem: null
}
objects.getChosenItemData = function(name){
return $http.get('/items/' + name).success(function(data){
// console.log(data);
angular.copy(data, objects.chosenItem);
console.log("Chosen Item: ", objects.chosenItem);
})
}
return objects
}]);
app.controller('MainCtrl', [
'$scope',
'items',
function($scope, items){
$scope.items = items.items;
$scope.chosenItem = null;
$scope.chooseItem = function(item){
items.getChosenItemData(item.name);
$scope.chosenItem = items.chosenItem; //chosen item object attribute in factory
console.log("$scope item: ", $scope.chosenItem);
}
}
});
这几乎所有的作品。我可以成功查询单击项的数据,但返回它是另一回事。第一次单击时,
$scope.chosenItem
的值为null
。然后,在第二次单击时,它将存储单击项的值。这也引起以下问题:如果我单击n
项目数量,则存储的值始终是n-1
项目的值,而不是当前项目。我需要它来存储第一次单击而不是第二次单击的项目的值。我有种感觉,我需要在这里的某个地方添加一个回调以使其正常工作,但是我对Angular / JS是陌生的,所以我不确定它应该放在哪里。
谢谢你的帮助!同样,有关Angular设计模式的任何提示或线索也将不胜感激,因为我觉得这是对看起来很简单的东西的可怕实现。
最佳答案
我建议您直接公开该服务:
$scope.serviceItem = items;
然后可以在这样的视图中调用它:
{{serviceItem.chosenItem}}
它将始终更新为最新的单击值。
希望对您有所帮助。