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的下拉渲染问题

回答

相关问题