As I am new to Angular, I have encountered a problem that requires some assistance. My task involves creating a selection of clickable items. When an item is clicked, the page should display its properties such as description. While the initial part is relatively straightforward, I am facing difficulties with the second part, specifically in displaying the data. Here is what I currently have:
On the front end, there is an Angular ng-click function named chooseItem(item)
, which accepts the clicked item as its parameter:
<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>
This selected item is then passed to the factory within items
through the items.getChosenItemData(item)
function. Since the actual item data resides in Mongo and not within the factory itself, this function retrieves the item data from the database. The retrieved data is stored in the chosenItem
object, which is subsequently passed back to the controller as $scope.chosenItem
.
The functionality almost works as intended. Data for the clicked item can be successfully queried, but returning it presents a challenge. Upon the first click, the value of $scope.chosenItem
is null
. Subsequent clicks store the value of the previously clicked item, resulting in inaccurate data storage. This issue arises when clicking on multiple items - the stored value always corresponds to the previous item rather than the current one. It needs to correctly store the clicked item's value upon the initial click, not the subsequent ones.
To address this, I suspect that incorporating a callback somewhere within the code may resolve the issue. However, being new to Angular and JavaScript, I am uncertain about where exactly this callback should be implemented.
Any assistance would be greatly appreciated! Furthermore, suggestions or guidance on Angular design patterns would be invaluable, given my belief that the current implementation may not be optimal for a seemingly uncomplicated task.