user5639481 user5639481 - 6 months ago 12
AngularJS Question

how to store objects in one array in common controller whose objects attribute are set from two different forms

sampleApp.controller('maincontroller',function($scope,$rootScope){
$rootScope.person=[];
})

sampleApp.controller('AddPersonalDetails',['$scope','myService',function($scope,myService,$rootscope) {

$scope.addData=function(){
// $scope.data.pname=data.name;
$scope.person.push($scope.data);
console.log(person);
}

}]);


sampleApp.controller('AddEducationalDetails', ['$scope','myService',function($scope,myService,$rootscope) {

$scope.addMydata=function(){

$scope.person.push($scope.data);

}
}]);


i want to add objects attribute from different controllers as data and want to store in single object and that object store in array of person in main controller ..

common controllr -- add data.name
personal controllr -- add personl details
educatinal controllr -- add educational details..

help me out to sort this problem

Answer

You can use Angular's value service to register an app wide property.

e.g.

var myApp = angular.module('myApp', []);

myApp.value('person', []);

Then use it in, for example, a controller:

myApp.controller('myController', ['$scope', 'person', function($scope, person) {
    // Do something to get some data
    person.push($scope.data);
}]);

Note that you need to pass the value in as a dependency for your controller.

UPDATE

It sounds like you want to update the same data object from different controllers on the same page. In this case, you can use a factory to initialise and then return the same data object to each controller. You'll need to pass the factory service into each controller as a dependency.

This way, both your AddPersonalDetails and your AddEducationalDetails controllers can add the same data object to their scopes for adding/updating data.

Factory

angular
    .module('myApp')
    .factory('DataService', [function() {

        var data = {};

        return data;

    }]);

AddPersonalDetails controller

angular
    .module('myApp')
    .controller('AddPersonalDetails', ['$scope', 'DataService', function($scope, DataService) {

        $scope.data = DataService;
        // Could also set some properties from this controller
        // e.g. $scope.data.name = 'Chris';

    }]);

AddEducationalDetails controller

angular
    .module('myApp')
    .controller('AddEducationalDetails', ['$scope', 'DataService', function($scope, DataService) {

        $scope.data = DataService;
        // Could also set some properties from this controller
        // e.g. $scope.data.college = 'Harvard';
    }]);

Then when you want to push to your person array:

MainController

angular.module('myApp')
    .controller('MainController', [
        '$scope',
        'DataService',
        function($scope, DataService) {
            $scope.persons = [];
            $scope.data = DataService;

            $scope.saveChanges = function() {
                // Make a copy of the data object, otherwise you'll be trying to save
                // the same object over and over
                var newData = angular.copy($scope.data);
                $scope.persons.push(newData);
            }
        }
    ]);

HTML

<div ng-controller="AddPersonalDetails">
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" class="form-control" type="text" ng-model="data.name">
        <br/>
    </div>
</div>
<div ng-controller="AddEducationalDetails">
    <div class="form-group">
        <label for="college">College</label>
        <input id="college" class="form-control" type="text" ng-model="data.college">
        <br/>
    </div>
</div>
<div ng-controller="MainController">
    <button class="btn btn-primary" ng-click="saveChanges();">Save Person</button>
    <h1>People</h1>
    <div ng-repeat="person in persons">
        <p>Name: {{person.name}}</p>
        <p>College: {{person.college}}</p>
    </div>
</div>

I've created a plunk for you here so you can test and play around with it. Hopefully this is what you're after.

http://plnkr.co/edit/5CCskS?p=preview