Ładowanie danych bezpośrednio do selectbox angularjs

Question

Mam klienta z subskrypcją. Możesz także edytować subskrypcję klientów.

Kiedy zamierzasz edytować subskrypcję, możesz wybrać różne opcje w różnych polach wyboru. Po wybraniu opcji w pierwszym polu wyboru, pozostałe pola wyboru są wypełniane danymi, które "należą" do opcji wybranej w pierwszym polu wyboru.

Oto kod html do mojego pierwszego wybierz zestawie:

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

Oto mój kod angularjs że wypełnia wybierz pole z danymi:

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

Ja tylko uzyskiwanie dane z mojego zaplecza.

Oto reszta moich wybranych skrzynek:

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

zmienić opcje w wybranych skrzynek z następującego kodu:

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

Powyższy kod wypełnia select-pudełka z danymi, w oparciu o wybraną opcję opcji w pierwszym polu wyboru.

Teraz do mojego problemu:

Chcę ustawić klientów bieżące ustawienia subskrypcji jako „wybrane” W wybranych skrzynek. Jak mogę to zrobić?

Próbowałem zrobić to ręcznie za pomocą następującego kodu:

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

To działa. Chodzi jednak o to, że chcę, aby wszystkie dane należące do "wybranej" wartości były ładowane bezpośrednio. Jak widać teraz, dane są generowane tylko wtedy, gdy wybierzesz nową wartość (w tym miejscu wywoływana jest ng-zmiana) w polu wyboru. Wszelkie sugestie, jak to zrobić?

Dane, które pochodzą z mojego zaplecza i ładują pole wyboru z danymi, to tablica z obiektami. Czy mogę w jakiś sposób uzyskać dostęp do całego obiektu i jego właściwości, gdy jest ustawiony na "zaznaczony"? Czy ktoś może mi pomóc?

Answer 1

Jeśli moje założenia są w porządku, masz aktualny abonament przechowywane w $rootScope.abbData i podczas wystąpień komponentu chcesz pobrać dane dla pierwszego zaznaczania ze swojego zaplecza, znaleźć tam bieżącą opcję subskrypcji, ustawić ją jako wybrany i zgodnie z nim zapełniają pozostałe wybrane pola?

Jeśli mam rację, myślę, że trzeba tylko zmienić swój ostatni blok kodu tak:

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