I am dealing with a scenario where I have both a parent $scope and a child $scope. When the child view loads, I initiate a GET request to fetch JSON data (an array containing hundreds of objects). This data is then passed to the parent $scope.
Within the child view, I retrieve data from the parent's model in order to create widgets using ng-repeat. Each widget contains data (a select dropdown) as well as an edit button that opens a modal residing in the parent view.
The problem:
My challenge lies in pulling the exact selected object data from the model into the modal. Furthermore, any changes made to this data within the modal should be reflected globally - in both the modal itself and the ng-repeat section in the child view.
In the Parent, I initialize an object to store the Array of Objects:
// Model to contain the items:
var itemsModel = {};
A controller call inside the Child upon view load:
// Inside Child view:
// GET request to retrieve items
ItemFactory.getAllItems(byProduct).then(function(data) {
// Setting the Parent's Model to the fetched data
$scope.main.itemsModel = data.data.items;
// Initializing ng-repeat in the child scope
vm.items = $scope.main.itemsModel;
vm.totalItems = $scope.main.itemsModel.length;
});
An example of one part of an object within the returned Array from the GET request:
{
tag: "kitchen",
term: "Red",
item_id: "99312"
}
HTML snippet for the ng-repeat section:
<div ng-repeat="item in child.items" class="col-md-6">
<section class="bg-placeholder" value="{{item.item}}">
<!-- Function to open the parent scope modal -->
<a href="" ng-click="child.openTagModal(item.item_id, item.item)">
<div ng-model="child.itemName" class="tag">
{{item.item}}
</div>
</a>
<div class="item-dropdown">
<select ng-model="item.chosenTag"
ng-change="child.updateTag(item)">
<option value="companies"
ng-selected="{{item.tag == 'kitchen'}}"
changed="kitchen">kitchen</option>
<option value="bedroom"
ng-selected="{{item.tag == 'bedroom'}}"
changed="bedroom">bedroom</option>
...
The function in the Child to open the modal that resides in the Parent:
vm.openItemModal = function(id, item) {
console.log(id);
console.log(item);
$scope.main.itemId = id;
$scope.main.product = item;
// Displaying the modal
$scope.main.modal_item = true;
$scope.main.modal = true;
HTML code for the modal in the Parent:
<select ng-model="main.tag"
ng-change="main.updateTag(id, item)"
class="btn-default">
<option value="kitchen"
ng-selected="{{main.tag == 'kitchen'}}"
changed="kitchen">kitchen</option>
<option value="bedroom"
ng-selected="{{main.tag == 'bedroom'}}"
changed="bedroom">bedroom</option>
Currently, modifying the item tag in the Parent model updates the item data in the Database, but does not affect the data within the Child scope or the ng-repeat.
vm.updateTag = function(id, tag, item) {
// PUT request to update object data in the Database:
ItemFactory.updateTag(
id,
tag,
item).then(function(data) {
console.log(data);
});
};
}
UPDATE:
Developed a new Factory service to manage updating the model. However, I still face issues with updating the Child tag scope within the ng-repeat FROM the Parent scope:
How to update model on select inside of ng-repeat?