Load data directly into selectbox angularjs

Question

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?

It would be very helpful if you could set up a plunker with some mock data. — tpie
– tpie, Commented Apr 17, 2015 at 7:04
@tpie: What do you mean "provide your data model for reference"? — user500468
– user500468, Commented Apr 17, 2015 at 7:14

Rudolf Gröhling · Accepted Answer · 2015-04-17 07:56:11Z

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

Collectives™ on Stack Overflow

Load data directly into selectbox angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related