Voreingestellte Dropdown-Liste basierend auf Werten des eckigen Objekts

Question

Ich habe ein Dropdown-Feld, in dem der Benutzer eine von drei Optionen auswählt. Basierend auf ihrer Auswahl wird eine Funktion in der Steuerung ausgelöst, die den Wert von zwei Eigenschaften eines Ereignisobjekts einstellt.

Dies ist der Drop-Down-:

<select type="text" id="private_gallery" class="form-control" ng-model="gallerySetting" ng-options="setting for setting in gallery_settings" ng-change="setGalleryType(gallerySetting)"> 
    </select> 

Dies ist der Code von der Steuerung, die das Drop-Down-auffüllt:

$scope.gallery_settings = ['Public', 'Private', 'Hidden']; 

Wenn öffentlichen, privaten oder versteckten ausgewählt sind, werden sie in die setGalleryType weitergegeben Funktion, die wie folgt aussieht:

$scope.setGalleryType = function (galleryType) { 
    switch (galleryType) { 
     case 'Public': 
     $scope.event.private_gallery = 0; 
     $scope.event.active = 1; 
     break; 
     case 'Private': 
     $scope.event.private_gallery = 1; 
     $scope.event.active = 1; 
     break; 
     case 'Hidden': 
     $scope.event.private_gallery = 0; 
     $scope.event.active = 0; 
     break; 
    } 
    }; 

All dies funktioniert genauso wie ex erkannt. Das Problem tritt auf, wenn die Anwendung neu geladen wird. Da das gallerySetting-Modell nicht im Backend gespeichert ist, ist das Dropdown-Feld nicht mehr mit der richtigen Option ausgefüllt. Dies ist sehr verwirrend für den Benutzer und sie gehen davon aus, dass die Einstellung nicht richtig gespeichert wurde.

Ich muss irgendwie die Dropdown-Liste basierend auf den event.private_gallery und event.active Werte festlegen. Ich habe versucht, den Code unten, aber das verursacht Umfang Probleme und nichts nach dem Drop-Down dann als Angular erkannt wird:

$scope.setGallerySetting = function() { 
    if ($scope.event.private_gallery == 0 && $scope.event.active == 1){ 
     return 'Public'; 
    } ... 
    }; 

$scope.gallerySetting = $scope.setGallerySetting(); 

Irgendwelche Gedanken auf der Basis Weg, dies zu tun?

Answer 1

Ich konnte dies mit dem Controller hinzuzufügen:

var setGallerySetting = function() { 
    if ($scope.event.private_gallery == 0 && $scope.event.active == 1){ 
     $scope.gallerySetting = 'Public'; 
    } else if ($scope.event.private_gallery == 1 && $scope.event.active == 1){ 
     $scope.gallerySetting = 'Private'; 
    } else { 
     $scope.gallerySetting = 'Hidden'; 
    } 
    }; 

    $scope.$watch('event.active', setGallerySetting); 
    $scope.$watch('event.private_gallery', setGallerySetting); 

Dieses dementsprechend sieht für alle Änderungen des event.active oder event.private_gallery Modell und setzt das gallerySetting Modell aussieht. Dies ist eine ineffiziente Art und Weise, dies zu tun, da es nur einmal ausgeführt werden muss, wenn die Anwendung ausgeführt wird, so dass jeder Verbesserungsvorschlag geschätzt wird.