Push data to parent controller from child [angularjs]
Question
I was trying to push cities object to array in a parent controller. The reply is "Cannot read property 'push' of undefined". Anyway to solve this?
The ChildCtrl is nested inside the ParentCtrl.
<!DOCTYPE html> <html lang="en" ng-app="citieApp"> <body> <div class="container"> <div ng-controller="ParentCtrl"> {{cites to be listed here ON UPDATE from the child controller}} <div ng-controller="ChildCtrl"> <form> <!--This inputs are to insert cities--> <input type="text"> <input type="text"> <input type="text"> <button>Submit Cities</button> </form> </div> </div> </div> </body> </html>
function ParentCtrl($scope) { $scope.cities = [{ america: [{ 'alberta', 'NY', 'chicago', 'LA' }, { 'atlanta', 'New town', 'boston', 'boulder' }, { 'dallas', 'austin', 'denver', 'colombus' }] }, { europe: [{ 'london', 'paris', 'Helsinki' }, { 'berlin', 'rome', 'tallin' }, { 'lisbon', 'amsterdam', 'brussels' }] }]; }; function ChildCtrl($scope) { $scope.cities.europe.push({ 'barcelona', 'madrid', 'manchester' }); }
I was trying to push cities object to array in a parent controller. The reply is "Cannot read property 'push' of undefined". Anyway to solve this?
2 answers
solution1
0 2016-06-09 15:49:47
Try to access it via $parent.
function ChildCtrl($scope) {
$scope.$parent.cities.europe.push({
'barcelona', 'madrid', 'manchester'
});
}
solution2
0 2016-06-09 15:58:08
In your code:
function ParentCtrl($scope) {
$scope.cities = [{
america: [{
'alberta', 'NY', 'chicago', 'LA'
}, {
'atlanta', 'New town', 'boston', 'boulder'
}, {
'dallas', 'austin', 'denver', 'colombus'
}]
}, {
europe: [{
'london', 'paris', 'Helsinki'
}, {
'berlin', 'rome', 'tallin'
}, {
'lisbon', 'amsterdam', 'brussels'
}]
}];
};
Here,
$scope.cities[0] = {
america: [{
'alberta', 'NY', 'chicago', 'LA'
}, {
'atlanta', 'New town', 'boston', 'boulder'
}, {
'dallas', 'austin', 'denver', 'colombus'
}]
};
$scope.cities[1] = {
{
europe: [{
'london', 'paris', 'Helsinki'
}, {
'berlin', 'rome', 'tallin'
}, {
'lisbon', 'amsterdam', 'brussels'
}]
};
But in your clild Controller you use ::
function ChildCtrl($scope) {
$scope.cities.europe.push({
'barcelona', 'madrid', 'manchester'
});
}
you push data into europe object, but europe object is not available in $scope.cities . you can change your $scope.cities as like as given below:
$scope.cities = {
america: [{
'alberta', 'NY', 'chicago', 'LA'
}, {
'atlanta', 'New town', 'boston', 'boulder'
}, {
'dallas', 'austin', 'denver', 'colombus'
}], {
europe: [{
'london', 'paris', 'Helsinki'
}, {
'berlin', 'rome', 'tallin'
}, {
'lisbon', 'amsterdam', 'brussels'
}]
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.