Angular：将模型正确绑定到选择以显示默认值答案

【问题标题】：Angular: properly bind a model to a select to show default valueAngular：将模型正确绑定到选择以显示默认值
【发布时间】：2016-01-19 12:31:48
【问题描述】：

在角度我有一个选择元素及其模型：

 <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 以查看实际问题

【问题讨论】：

我尝试创建一个plunker 来重新创建您的问题，并且您在此处发布的代码可以正常工作。
就目前而言，您的代码不会重现您建议您正在看到的行为。需要更多代码来识别项目中的不同之处。
如果我不得不猜测这个问题，我认为这可能与myModel 是一个原语而不是一个有范围的对象有关继承问题，特别是如果此代码位于 ng-repeat 中。
ng-repeat 以外的其他内容可能会导致原语的范围问题，ng-if 和 ng-include 是另外两个创建子范围的常用指令。考虑将您的模型更改为一个对象，即 myModel 到 myModel.optionValue 或类似的东西，看看它是否能解决您的问题。
我现在正在尝试查看您的案例...我可以看到问题在于角度将您的模型解释为一种情况下的数字和另一种情况下的字符串，但我目前尚不清楚为什么或如何发生这种情况。

标签： angularjs angular-ngmodel

【解决方案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

更新--

Plunker 用于给定脚本

【讨论】：

是的，您的代码对我来说正常工作。请检查更新的答案。我已经给出了替代答案。

【解决方案2】：

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

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

请注意，不使用ngOptions 的选择指令的值始终是字符串。当模型需要绑定到非字符串值时，您必须使用指令显式转换它（参见下面的示例）或使用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

【讨论】：