Question

我正在创建select元素并使用数组来设置值在我的控制器中，我设置了

$scope.numbers = _.range(20);
$scope.selectedNumber = 5;

和我的HTML

    <select ng-model='selectedNumber' 
class='some-class' 
ng-options="item as item for item  in numbers" >
</select>

班级的CSS是

.some-class{
   border:1px solid gray;
   border-radious:xxx;
   width:xxpx;
  heihgt:xxpx;
}

我的问题是所选的值不会在页面加载时呈现只有在select元素内部单击后。（当我使用ng-class而不是class时也会发生。）

如果我删除该类，那么它只是呈现正常。

（另一个快速问题：为什么如果我不添加ng-model，ng-options不会显示任何内容

Answer 1

我为你准备了一些我希望能帮助你理解的例子，我不知道你的$scope.numbers类型是什么，如果它是一个整数，字符串或对象的数组，而是model必须是相同的类型，如果您希望模型是对象，那么它必须通过引用传递。虽然在使用ng-model时必须回答您的问题ng-options，但如果您不想要模型，则可以使用此模式

<select>
  <option ng-repeat="number in numbers">{{number}}</option>
</select>

以下是选择的不同输入类型，请访问plunker以查看其工作

$scope.numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  $scope.selectedNumber = 5

  $scope.numbersTwo = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  $scope.selectedNumberTwo = '6'

  $scope.numbersThree = [{
    num: 0
  }, {
    num: 1
  }, {
    num: 2
  }, {
    num: 3
  }, {
    num: 4
  }, {
    num: 5
  }, {
    num: 6
  }, {
    num: 7
  }, {
    num: 8
  }, {
    num: 9
  }, {
    num: 10
  }]

  $scope.selectedNumberThree = $scope.numbersThree[7]

  $scope.selectedNumberFour = 8

http://plnkr.co/edit/7mzuj8Fg46xVv6bwhiOt?p=preview

Answer 2

ng-options需要与ng-model匹配才能呈现值。

例如，如果ng-model给出“Boston”的值，则需要具有该键/值对，或者只需要ng-options列表的对象/数组中的值。它的情况也很敏感。

控制器：

$ scope.city =“波士顿”; $ scope.cityDetails = service.cityList;

服务：

$ scope.cityList = {“波士顿”，“圣何塞”，“芝加哥”，“纽约”};

所以在尝试循环时，你需要以这种方式循环。

<select ng-model="city" ng-options="cityData for cityData in cityDetails"></select>

angular ng-options not selected value not render

2 个答案: