Question

在角度我有一个带有模型的选择元素：

 <select class="form-control" name="items" id="items" ng-model="myModel">
          <option value ="10">10</option>
          <option value ="20">20</option>
          <option value ="30">30</option>
 </select>
 {{myModel}}

在我的控制器中我有：

$scope.myModel = "20";

加载页面后，{{myModel}}等于20，但选择框为空，而不是显示20。稍后，如果我更改该框的值，{{myModel}}值也会更改。它看起来很合适。但是如何在页面加载时显示正确的值（以及为什么会发生？）

这里有一个plnkr来查看行动中的问题

Answer 1

尝试使用ngOptions。

这样做

<select name="myModel" id="myModel"
      ng-options=" option  for option in select track by option "
      ng-model="myModel">

Javascript：

$scope.myModel = "30";
$scope.select = [10,20,30];

以下是plunker

UPDATE -

给定脚本的

Plunker

Answer 2

正如原fork的plunker所示，问题是由st-table指令引起的。

此指令正在将您的itemsPerPage属性更改为数字。由于limitations of the angular select directive，select的ng-model只能是一个字符串。

请注意，在没有ngOptions的情况下使用的select指令的值始终是一个字符串。当模型需要绑定到非字符串值时，您必须使用指令显式转换它（请参阅下面的示例）或使用ngOptions指定选项集。这是因为选项元素目前只能绑定到字符串值。

您有3个选项可用于克服这种情况：

使用ng-options填充<options>。
将您的ng-model财产绑定到与传递给st-table的媒体资源不同的属性。
明确地将模型转换为字符串，如angular select documentation page上的最后一个代码示例所示：

.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        return parseInt(val, 10);
      });
      ngModel.$formatters.push(function(val) {
        return '' + val;
      });
    }
  };
});

<select convert-to-number class="form-control" name="items" id="items" 
        ng-model="itemsByPage">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
</select>

http://plnkr.co/edit/KbVd9vjihS1zrmIBCptF?p=preview

Angular：将模型正确绑定到select以显示默认值

2 个答案: