Currently, I am facing an issue with adding a new object to an ng-repeat array. The array is populated with data fetched through an $http request. My goal is to input data in a dialog and pass it to a function that will then add the data as an object to the array, subsequently updating the view. While I can log the input values without any problem and even observe the updated values in the console when logging the array itself, the view fails to reflect these changes. Interestingly, the array updates successfully if I add an object using a button outside of the dialog.
Recent Update
Upon inspecting scopes using Chrome's Angular ng-Inspector, I noticed that the new object gets added to the array within the scope of the controller, which acts as a parent to the element containing the ng-repeat directive. However, the ng-repeat element has its own scope where the array update seems to be missing. It is crucial for me to update this particular array since it is linked to the ng-repeat directive and controls what is displayed on the user interface. The existence of two identical arrays, one reflecting changes while the other doesn't, remains puzzling. When pushing the object onto '$scope.plots', my aim is to target the scope of the ng-repeat parent element. Finding an effective method to achieve this is still an ongoing challenge for me.
Dialog Implementation
function showAdd(ev) {
$mdDialog
.show({
controller: DialogController,
templateUrl: '/templates/addDialog.html', //includes inputs associated with values used in the push function below. Pressing a button invokes addPlant()
targetEvent: ev,
clickOutsideToClose: true,
openFrom: 'left'
}).then(function(added) {
newPlant(added);
})
}
Dialog Controller Setup
function DialogController($scope, $mdDialog, $http) {
$scope.addPlant = function (added) {
for (var i = 0; i < added.quantity; i++) {
$http.post('/addPlant', added).then(function () { //solely responsible for posting data to a database, not directly related to the current issue.
$mdDialog.hide(added);
}
});
}
};
The Function for Pushing Data
var newPlant = function(added) {
$scope.plots.push({
'plot': added.plot,
'varieties': [{
'count': added.quantity,
'variety': added.variety
}],
'count': added.quantity
});