Loading data directly into selectbox angularjs

Question

I have a client with a subscription. You can also edit the customer subscription.

When you are going to edit a subscription, you can choose different options in different select-boxes. When you select an option in the first select-box, the remaining selection fields are filled with data that "belongs" to the option you selected in the first selection box.

Here is the html code for my first select-box:

<select class="form-control input-sm2" ng-model="selectedSupercustomer" ng-options="item as item.namn for item in superkundOptions" ng-change="onChangeSuperCustomer(selectedSupercustomer)"> 

Here is my angularjs code that populates the select box with data:

 $http.get($rootScope.appUrl + '/nao/abb/getSuperkundData/' + $rootScope.abbForm).success(function(data) { $scope.superkundOptions = data; }); 

I just get data from my backend.

Here are the rest of my samples:

 <select class="form-control input-sm2" ng-disabled="!selectedSupercustomer" ng-model="selectedGateway" ng-options="item as item.gwtypen for item in gatewayOptions" ng-change="onChangeGateway(selectedGateway)"><option value=''>Välj GW</option></select> <select class="form-control input-sm2" ng-disabled="!selectedSupercustomer" ng-model="selectedSwitch" ng-options="item as item.gatuadresser for item in switchOptions" ng-change="onChangeSwitch(selectedSwitch)"><option value=''>Välj switch</option></select> 

I change the parameters in the selection cells with the following code:

 $scope.onChangeSuperCustomer = function(selectedSupercustomer) { $http.get($rootScope.appUrl + '/nao/abb/getGatewayData/' + selectedSupercustomer.nod_id).success(function(data) { $scope.gatewayOptions = data; }); $http.get($rootScope.appUrl + '/nao/abb/getSwitchData/' + selectedSupercustomer.superkund_id).success(function(data) { $scope.switchOptions = data; }); $http.get($rootScope.appUrl + '/nao/abb/getLanAbonnemangsformData').success(function(data) { $scope.abbformOptions = data; }); $http.get($rootScope.appUrl + '/nao/abb/getSupplierData').success(function(data) { $scope.supplierOptions = data; console.log($scope.supplierOptions); }); } 

The code above fills in the selected windows with data, depending on the parameter value you have selected. In the first selection field.

Now, while my problem is:

I want to set the current client subscription settings as "selected" in the selection box. How can i do this?

I tried to do this manually with the following code:

 $http.get($rootScope.appUrl + '/nao/abb/getSuperkundData/' + $rootScope.abbForm).success(function(data) { $scope.superkundOptions = data; $scope.superkundOptions.unshift({ id: $rootScope.abbData.superkund_id, namn: $rootScope.abbData.namn}); //Sets this to default selected In first selectbox $scope.selectedSupercustomer = $scope.superkundOptions[0]; }); 

It works. But the fact is that I want all the data belonging to the "selected" value to be loaded directly. As you can see now, data is generated only if you select a new value (ng-change is called here) in the selection field. Any suggestions on how to do this?

The data that comes from my backend, and loads a selection box with data, is an array with objects. Can I somehow access the entire object and its properties when it is set to "selected"? Can anybody help me?

Answer 1

If my assumptions are correct, you have the current subscription stored in $rootScope.abbData , and when you create the component instance, you want to get the data for the first selection field from your internal server, find the current subscription there, set it as the selected one and make it filled in the rest of your selection fields?

If I understood correctly, I think you only need to change your last block of code as follows:

 $http.get($rootScope.appUrl + '/nao/abb/getSuperkundData/' + $rootScope.abbForm).success(function(data) { $scope.superkundOptions = data; // find current subscription in data and set it as selected angular.forEach($scope.superkundOptions, function(option) { if (option.id === $rootScope.abbData.superkund_id) { $scope.selectedSupercustomer = option; // fire onChange event to populate rest of the select boxes $scope.onChangeSuperCustomer(option) } }) });