Question

我正在使用AngularJS通过$ http.get（）捕获字符串数组，并使用它来填充Select元素。在我的示例中，它很好地填充了四个有效选项（以及令人讨厌的空的第一个选项），但Select元素的selectedIndex并未反映我的$ scope.opCall值的实际值。我尝试将其在视图中设置为0、1、2等，但没有成功。通过UI从drowpdown中选择不同的值确实可以成功更新UI，$ scope.opCall和updateLogDisplay（）可以正常工作。实际上，除了页面上的Select元素外，一切都按预期工作，未在初始加载时选择第一个有效选项。它是空的。我是否明显缺少某些东西或做错了什么？

在控制器中：

myApp.controller('LogViewCtrl', ['$scope','$http',function(scope,http){

  scope.getOperatorsUrl = '[redacted]';
  http.get(scope.getOperatorsUrl).
  then(function (data, status, statusText, headers, config)
  {
    scope.operators = data.data;
    scope.call = scope.operators[0] || ''; 
  });

在template / html中：

<select id="select1" 
        style="width: 150px;" 
        ng-model="opCall" 
        size='1'
        selectedIndex = "0"
        ng-change="updateLogDisplay();"
        ng-options="op for op in operators" 
        ng-init="opCall = operators[0]">
    <option value="" ng-show="false"></option>
</select>

谢谢，迈克尔

Answer 1

问题是您的 operators 数组是在构建UI后填充的，因此在 ng-init 时，我想您的operator数组未定义

一旦知道在HTTP请求之后已经填充了 operators 数组后，就必须在控制器中填充 opCall 模型（因此在 then ）。

Answer 2

将NgModel设置为控制器中的第一项，而不是在视图中使用NgInit。

myApp.controller('LogViewCtrl', ['$scope','$http',function(scope,http){

  scope.getOperatorsUrl = '[redacted]';
  http.get(scope.getOperatorsUrl).
  then(function (data, status, statusText, headers, config)
  {
    scope.operators = data.data;
    scope.opCall= scope.operators[0] || ''; 
  });

然后查看：

<select id="select1" 
        style="width: 150px;" 
        ng-model="opCall" 
        ng-change="updateLogDisplay();"
        ng-options="op for op in operators">
</select>

Answer 3

如果要显示HTML更改，请调用$ scope。$ apply（）;。然后在您的函数部分... read here ..它会更新变量绑定

使用AngularJS时如何设置selectedIndex

3 个答案: