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

Question

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

Can you format the code aspect of your question correctly? Its difficult to read. — Quade Dumont
– Quade Dumont, Commented Dec 17, 2015 at 6:10
im not using service yet ... im using $rootScope but if u can do with that then thnx in advance :) — user5639481
– user5639481, Commented Dec 17, 2015 at 9:09

Chris · Accepted Answer · 2015-12-21 06:46:39Z

1

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

edited Dec 21, 2015 at 6:46

answered Dec 17, 2015 at 6:27

Chris

3551 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user5639481 Over a year ago

thnx for ur answer But my actual problem is that data is an object here and its atrribute are collected from different controllers (like personal controller has its name ,address and educatiional controller has degree or board ) and i want to set this attribute for single object first as in data and then push into an array i.e person ....person is shared that is Ok but how to make object with these attributes coming from different controllers ...

Chris Over a year ago

So person should be an object then and not an array? And you want to set properties for person from different controllers?

user5639481 Over a year ago

nooo..... hmm its look like this person=[] and data={} and i want to add proterties into data as data={name:" ",email:" ",education:" ",college:" "} and here name and email come from controller and other are form different controller and finally want push that data object into person array..like [{name:"",email:"",edu:"",college},{name:"":....}]....no of objcts for diffent diff user info into person[]

user5639481 Over a year ago

if u got my problem then plz me sol with using services or factry coz i tried with rootscope but not effiecient

Chris Over a year ago

Ok, and are all of these controllers on the same page?

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related