Question

我的下拉菜单出现问题。我已将其设置为在点击时填充 - 但是当它不能正常渲染时。请参阅附图（http://imgur.com/a/0GiRZ）。它需要再次单击下拉菜单才能展开。

这是我的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完全一样） - 因为也许你加载数据的方式不会触发它，顺便说一句你得到{{1 }}？顺便说一句2：如果您有可能使用dbParams或至少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"将重绘HTML中的元素（ng-if仅显示它）并调用ng-show来加载数据。

Answer 2

我认为你会遇到一些奇怪的行为，只需点击选择输入元素就可以填充数据库列表（至少在Chrome中，如果在打开输入后选择选项发生变化）将显示向上/向下箭头，如果没有选项，它将只有1行高，然后在显示选择选项后出现选项。）

我建议您改为监听target_type属性的更改，并在检测到更改时加载数据库。您可以在类型的select元素上使用ng-change或在该属性上使用$scope.$watch执行此操作。我创建了一个plunkr showing how to do each way（你会注意到plunkr有两个版本）。

此外，如果您拥有数据库所依赖的其他属性，则可以设置类似的内容并查找其他属性的更改。这只是为了向您展示一些可能更适合您的其他选项。

方法1：ng-change

添加ng-change属性

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

添加处理更改的方法

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

方法2：$ scope。$ watch（）

将手表添加到$scope属性

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

注意：您需要根据$scope对象结构设置要监视的属性。上面的例子只是使用我的plunkr设置。

使用HTML和AngularJS下拉渲染问题

2 个答案: