Carica dati direttamente in selectbox angularjs

Question

Ho un cliente con un abbonamento. Puoi anche modificare l'abbonamento ai clienti.

Quando si modifica l'abbonamento, è possibile scegliere diverse opzioni in diverse caselle di selezione. Quando si sceglie un'opzione nella prima casella di selezione, le altre caselle di selezione vengono riempite con i dati che "appartengono" all'opzione scelta nella prima casella di selezione.

Ecco il codice html per la mia prima casella select:

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

Ecco il mio codice angularjs che riempie la casella select con i dati:

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

Sto ricevendo il dati dal mio back-end.

Ecco il resto dei miei Select-scatole:

<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> 

posso cambiare le opzioni nei SELECT-scatole con il seguente codice:

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

Il codice sopra riempie Select-box con i dati, in base al valore dell'opzione che hai scelto Nella prima casella di selezione.

Ora fino al mio problema:

voglio impostare i clienti delle impostazioni correnti come "selezionato" Nei select-box. Come lo posso fare?

ho cercato di farlo manualmente con il seguente codice:

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

Questo funziona. Ma il fatto è che voglio che tutti i dati che appartengono al valore "selezionato", debbano essere caricati direttamente. Come puoi vedere ora, i dati vengono generati solo se scegli un nuovo valore (il comando ng è attivato qui), nella casella di selezione. Qualche suggerimento su come farlo?

I dati che provengono dal mio back-end e carica la casella di selezione con i dati, è una matrice con oggetti. Posso in qualche modo accedere a tutto l'oggetto e alle sue proprietà quando è impostato su "selezionato"? Qualcuno può aiutarmi?

Answer 1

Se le mie ipotesi sono giuste, si dispone di abbonamento in corso memorizzato in $rootScope.abbData e quando si crea un'istanza di componente, si vuole recuperare i dati per la prima casella di selezione dal terminale, troverete un opzione di abbonamento corrente, impostarlo come selezionato e secondo esso popolano il resto delle tue caselle di selezione?

Se ho capito bene, penso che solo bisogno di cambiare il vostro blocco di codice ultima in questo modo:

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