HTMLとAngularJSのドロップダウンレンダリングの問題

Question

私のドロップダウンメニューに問題があります。私はそれがクリックで生成されるように設定しましたが、それは正常にレンダリングされません。添付の画像（http://imgur.com/a/0GiRZ）をご覧ください。ドロップダウンメニューを2回クリックして展開する必要があります。

これは私のHTMLコードです：

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

角度：

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

工場：

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

私は、問題の原因となっているのかわからないのです - その私ができる唯一のことをng-clickを考えてみてください。私はng-changeを使ってみましたが、それでも問題は解決しませんでした。

ありがとうございました。

Answer 1

こと$timeoutであなたのコードをラップするようにしてください：

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

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

それは$digestサイクルを強制すると要素を（正確に$scopeとして、それを注入することを忘れないでください）再描画します - 原因となるかもしれないデータをロードするのあなたの方法は、それをトリガしません。 、あなたはどのようにdbParamsを得るbtw？ btw 2：もちろん、可能であればcomponentまたは少なくともcontrollerAsの構文を使用することをお勧めします。レガシーコードでは不可能かもしれませんが、新しいプロジェクトを開始する場合は$scopeの直接使用を避けてください。それは動作しません場合または、div class="form-group"に、もちろん

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

に

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

を変更してみてください。 ng-ifはHTMLの要素を再描画します（ng-showは表示されません）。db()を呼び出してデータをロードします。

Answer 2

私はあなたが選択入力要素のクリックでデータベースリストにデータを入力しているようなやり方で何か奇妙な動作に遭遇すると思います（少なくとも、入力オプションを開いた後に選択オプションを変更すると上/下矢印が表示され、オプションがない場合は1行の高さになり、選択オプションが表示されている場合はオプションが表示されます）。

代わりに、target_typeプロパティの変更をリッスンし、変更が検出されたときにデータベースをロードすることをお勧めします。タイプの選択要素でng-change、またはそのプロパティで$scope.$watchを使用してこれを行うことができます。私はplunkr showing how to do each wayを作成しました（plunkrには2つのバージョンがあります）。

さらに、データベースが依存するその他のプロパティがある場合は、同様の設定を行い、他のプロパティの変更も検索できます。これは、おそらくあなたのためにもっとうまくいくいくつかの他のオプションを表示することを意味しています。

方法1：NG-変更

は

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

ng-change属性を追加します

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

変更を処理するメソッドを追加します。方法2：$スコープ$腕時計（）

あなたの $scopeオブジェクト構造に基づいて、上見てプロパティを設定する必要があります：

は注意

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

$scopeプロパティに時計を追加します。上記の例は、私のplunkrセットアップを使用しているだけです。