HTML和AngularJS的下拉渲染問題

我的下拉菜單出現問題。我已經設置好它，使它在點擊時生成 - 但是當它不能正常渲染時。請參閱附件圖片（http://imgur.com/a/0GiRZ）。它需要第二次點擊才能展開下拉菜單。HTML和AngularJS的下拉渲染問題

這是我的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，但沒有解決問題。

感謝您的幫助。

來源

2017-04-07 Heather

爲什麼'$ scope.db'是一個函數，也是一個數組？ – tanmay

你能提供你的systemFactory.getDB方法嗎？ –

謝謝@tanmay。我沒有意識到我有他們兩個名爲$ scope.db。將其結果名稱更改爲$ scope.database。 – Heather

嘗試來包裝你的代碼$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 2：如果您有可能使用component或至少controllerAs語法，我真的鼓勵您。遺留代碼可能無法實現，但是如果您啓動新項目，則應儘量避免直接使用$scope。或者，如果它不會工作，試圖改變

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

到

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

當然，在div class="form-group"。 ng-if將重新繪製HTML元素（其中ng-show它只顯示），並呼籲db()這將加載數據。

來源

2017-04-07 20:25:31

我認爲你會遇到一些奇怪的行爲，就像你在填充數據庫列表時一樣，通過點擊select輸入元素（至少在Chrome中，如果在打開輸入後選擇選項發生變化你會看到上/下箭頭，如果沒有選項，它將只有1行高，然後在已經顯示選擇選項後出現選項）。

我會建議您改用target_type屬性，並在檢測到更改時加載數據庫。您可以使用ng-change對select類型的元素或$scope.$watch對該屬性執行此操作。我創建了一個plunkr showing how to do each way（你會注意到這個plunkr有兩個版本）。

此外，如果您有數據庫依賴的其他屬性，則可以設置類似的內容並查找其他屬性的更改。這只是爲了向你展示其他一些可能對你更好的選擇。

方法1：NG-變化

添加ng-change屬性

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

添加的方法來處理變化

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

方法2：$範圍$腕錶（）

手錶添加到$scope財產

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

注：您將需要建立基於您的$scope對象結構上觀看的財產。上面的例子只是使用我的plunkr設置。

來源

2017-04-08 15:39:59

HTML和AngularJS的下拉渲染問題

回答

相關問題