CODEWITHSUNDEEP
javascriptangularjs
user500468
user500468

Reputation: 1221

Load data directly into selectbox angularjs

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

When you are going to edit the subscription, you can choose different options in different select-boxes. When you choose an option in the first select-box, the other select-boxes are filled with data that "belongs" to the option you chose in the first select-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 fills the select-box with data:

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

I'm just getting the data from my backend.

Here is the rest of my select-boxes:

<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 options in the select-boxes 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 the select-boxes with data, based on the option value you chose In the first select-box.

Now till my problem:

I want to set the customers current subscription settings as "selected" In the select-boxes. How can I do that?

I tried to do it 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];
});

This works. But the thing is that I want all the data that belongs to the "selected" value, should be loaded directly. As you can see now, the data is generated only if you choose a new value(the ng-change Is triggered here), in the select-box. Any suggestions how to do this?

The data that comes from my backend, and loads the select-box with data, is an array with objects. Can I somehow get access to the whole object and it's properties when it is set to "selected"? Can anyone help me?

Upvotes: 6

Views: 723

Answers (1)

Rudolf Gr&#246;hling
Rudolf Gr&#246;hling

Reputation: 4825

If my assumptions are right, you have current subscription stored in $rootScope.abbData and when you instantiate component, you want fetch data for the first select box from your backend, find there a current subscription option, set it as selected and according to it populate the rest of your select boxes?

If I got it right, I think you only need to change your last code block like so:

$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)       
        }
    })
});

Upvotes: 1

Related Questions