Manipulate an array dynamically with several controllers of the Angular.js

Question

Manipulate an array dynamically with several controllers of the Angular.js

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Well, I have a feature on my system that has a large interaction with the end user, I then opted to employ Angular.js .

My goal is to dynamically populate a array and when the user der submit I send such data via $ http.post () to an action on my server that will "parse" such an array for my object (Jackson-bound ).

But the problem is that I do not know how to accomplish this in a correct way, because I have 2 modals on my screen in which every time I press "Add" a list will be populated dynamically on the screen and such data will be included in that tree.

Below I have the tree of my object in which I want to add the data via angular.

customerData = {
                    "idCustomer":null,
                    "tenantId":null,
                    "birthDate":$scope.birthDate,
                    "email":$scope.email,
                    "firstName":$scope.firstName,
                    "gender":$scope.gender,
                    "lastName":$scope.lastName,
                    "document":{
                       "id":null,
                       "tenantId":null,
                       "rg":$scope.customerRg,
                       "cpf":$scope.customerCpf
                    },
                    "customerPhone":{
                       "id":null,
                       "tenantId":null,
                       "celPhone":$scope.customerCelPhone,
                       "homePhone":$scope.customerHomePhone,
                       "workPhone":$scope.customerWorkPhone
                    },
                    "passenger":null,
                    "customerAddress":{
                       "id":null,
                       "tenantId":null,
                       "cep":$scope.customerAddressCep,
                       "complement":$scope.customerAddressComplement,
                       "number":$scope.customerAddressNumber,
                       "quarter":$scope.customerAddressQuarter,
                       "street":$scope.customerAddressStreet,
                       "city":$scope.customerAddressCity,
                       "state":$scope.customerAddressState,
                       "country":null
                    },
                    "observations":$scope.observations,
                    "site":false,
                    "customerService":{
                       "id":null,
                       "tenantId":null,
                       "date": new Date.now(),
                       "averageBudget":null,
                       "situation":true,
                       "serviceItem":[{
                       }],
                       "history":[{
                          "id":null,
                          "tenantId":null,
                          "register": "Primeiro Atendimento",
                       }],
                       "serviceObservations": "Xpto"
                    }
                 };

For example I have a controller in which to add in the serviceItem data in list form:

app.controller('RequestedDestinationModalController', ['$scope', function($scope) {
    $scope.addReqDestiantion = function(){
        this.customerData.customerService.serviceItem.push({
            "id":null,
            "destination":$scope.destinationModalCtrl.destination,
            "customerService":null,
            "tenantId":null,
            "valueNegotiated":$scope.destinationModalCtrl.valueNegotiated,
            "saleType":$scope.destinationModalCtrl.saleType,
            "departureDate":$scope.destinationModalCtrl.departureDate,
            "arrivalDate":$scope.destinationModalCtrl.arrivalDate,
            "seeIn":$scope.destinationModalCtrl.seeIn,
            "requestedDestination":$scope.destinationModalCtrl.requestedDestination,
            "negociationObservations":$scope.destinationModalCtrl.negociationObservations
         });
    };
}]);

But in the case I would need to leave my array which contains the keys of objects stored somewhere to respectively manipulate it. So what's the problem, how to manipulate the array via multiple controllers?

angularjs json

asked by anonymous 22.06.2015 / 18:55

2 answers

What are the most common ways to do data insertion remotely? Problem with login / logout in PHP

score 1 · Answer 1

Then you need to declare the array in a global scope, not within the controllers.

Each controller has its own specific scope, but when you create a global-scoped variable (in the module that includes all the controllers of your interest) you can access this variable in all controllers.

Do not necessarily use a factory. When you start your code you declare a module, which is the main one of your application, right?

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

Then you assign to your module your services, controllers, etc ... using:

app.controller(...
app.service(...
...

If you declare your variables outside the scope of these controllers, services, they will be within the "myApp" module, which is the "parent" of those others. So you have the variables in a global scope, because all children will access this variable that is in the parent.

score 0 · Answer 2

As each controller has a scope that in its case would be the '$ scope', but this scope will 'die' when switching from controllers. So I suggest using the $ rootScope of angularJS ( link $ rootScope). With it you can create an array of $ rootScope and that is accessible for all controllers.

Ex: $ rootScope.array.customerData = [];

app.controller ('RequestedDestinationModalController', ['$ scope', '$ rootScope', function ($ scope, $ rootScope) {

var object = {}; $ rootScope.array.customerData.push (object);

...