Dropdown-Render-Problem mit HTML und AngularJS

Question

Ich habe ein Problem mit meinem Dropdown-Menü. Ich habe es so eingestellt, dass es auf einen Klick auffüllt - aber wenn es nicht normal rendert. Bitte beachten Sie das beigefügte Bild (http://imgur.com/a/0GiRZ). Es erfordert einen zweiten Klick, um das Dropdown-Menü zu erweitern.

Das ist mein HTML-Code:

 <div class="form-group" ng-show="system.properties[0].value.target.connection.target_type === 'hive'"> 
       <label class="col-sm-3 control-label" for="sdb">Database</label> 
       <div class="col-sm-7" > 
        <select class="form-control" ng-model="system.properties[0].value.target.connection.target_db" ng-click="db()"> 
         <option ng-repeat="d in database" value={{d.name}}>{{d.name}}</option> 
        </select> 
       </div> 
    </div> 

Eckig:

// Calls DB preview 
    $scope.db = function() { 
     systemFactory.getDB(dbParam).then(function successCallback (result) { 
      $scope.database = result.data.Data; 
     })   
    }; 

Fabrik:

getDB: function(data) {        
     var settings = { 
      method: 'POST', 
      data: data, 
      headers: {'Content-Type': 'application/json; charset=UTF-8'}, 
      url: config.webserviceNonHTZ + "/getPreview", 
      withCredentials: true 
    }; 

Ich bin nicht sicher, was das Problem verursacht - Das einzige, was ich kann, Denken Sie an NG-Klick. Ich habe versucht, mit ng-Änderung, aber das Problem nicht behoben.

Danke für Ihre Hilfe.

Answer 1

Versuchen Sie den Code in $timeout wickeln:

$scope.db = function() { 
     $timeout(function() { 
      _loadFromDb(dbParam); 
     }) 
    }; 

function _loadFromDb(dbParam) { 
    systemFactory.getDB(dbParam).then(function successCallback (result) { 
      $scope.database = result.data.Data; 
     })   
} 

Es $digest Zyklus zwingen wird, und wird neu gezeichnet Elemente (denken Sie daran, es zu injizieren, genau wie $scope) - verursachen vielleicht Ihre Art und Weise Daten von Laden Sie es nicht auslösen , wie bekommt man dbParams? BTW 2: Ich ermutige Sie wirklich, wenn Sie eine Möglichkeit haben, natürlich component s oder mindestens controllerAs Syntax zu verwenden. Dies ist möglicherweise nicht mit Legacy-Code möglich, aber wenn Sie ein neues Projekt starten, sollten Sie versuchen, die direkte Verwendung von $scope zu vermeiden. Oder, versuchen, wenn es nicht funktioniert, auf div class="form-group"

ng-show="system.properties[0].value.target.connection.target_type === 'hive'" 

zu

ng-if="system.properties[0].value.target.connection.target_type === 'hive'" ng-init="db()" 

Natürlich zu ändern. ng-if wird Element in HTML neu zeichnen (mit ng-show wird es nur nicht angezeigt) und db() anrufen, die Daten laden wird.

Answer 2

Ich denke, dass Sie auf seltsame Art und Weise mit dem Auffüllen der Datenbankliste beim Klicken auf das Select-Eingabeelement (zumindest in Chrome, wenn sich die Auswahloptionen ändern, nachdem die Eingabe geöffnet wurde) verfahren Sie sehen nach oben/unten Pfeile und es wird nur 1 Reihe groß sein, wenn es keine Optionen gab und dann erscheinen Optionen, nachdem es bereits die Auswahloptionen anzeigt).

Ich würde stattdessen empfehlen, auf Änderungen an Ihrer target_type Eigenschaft zu achten und die Datenbanken zu laden, wenn eine Änderung erkannt wird. Sie können dies entweder mit ng-change für das select-Element für die Typen oder mit $scope.$watch für diese Eigenschaft tun. Ich habe eine plunkr showing how to do each way erstellt (Sie werden feststellen, dass es zwei Versionen für die Plunkr gibt).

Wenn Sie andere Eigenschaften haben, von denen die Datenbanken abhängig sind, können Sie etwas Ähnliches einrichten und nach Änderungen für die anderen Eigenschaften suchen. Dies soll Ihnen nur einige andere Optionen zeigen, die wahrscheinlich für Sie besser funktionieren.

Methode 1: ng-change

Fügen Sie das ng-change Attribut

<select ... ng-change="targetTypeChanged()"> 
    ... 
</select> 

die Methode Fügen Sie die Änderung

$scope.targetTypeChanged = function() { 
    if ($scope.isHiveType()) { 
     $scope.loadDatabases(); 
    } 
}; 

Methode 2 zu verarbeiten. $ Scope $ Uhr()

Fügen Sie die Uhr auf die $scope Eigenschaft

$scope.$watch('connection.target_type', function() { 
    if ($scope.isHiveType()) { 
     $scope.loadDatabases(); 
    } 
}); 

Hinweis: Sie werden die Eigenschaft benötigen, zum auf auf der Grundlage Ihrer $scope Objektstruktur zu beobachten. Das obige Beispiel verwendet nur mein Plunkr-Setup.