模型的选择和 NgModel 问题答案

【问题标题】：Select and NgModel issue with model模型的选择和 NgModel 问题
【发布时间】：2016-06-07 23:51:43
【问题描述】：

我对选择标签和 ngmodel 有疑问。模型中变量的值没有显示在下拉选项中。

代码如下：

<select ng-model="number">
  <option values="5">5</option>
  <option values="10">10</option>
  <option values="20">20</option>
  <option values="25">25</option>
</select>

其中number在控制器中定义为20。

编译后添加如下HTML：

<option value="? undefined:undefined ?"></option>

注意：

我还在HTML视图中呈现了number，在{{number}}表达式中显示数字没有问题——然后就正确显示了。

这是一个plnkr：

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

【问题讨论】：

你想达到什么目的？您想要一个显示number 值的额外选项吗？
控制器中有`$scope.number = '20';`吗？ plunker
@LJ.Wizard 确切地说，我希望选择的选项（默认设置的选项）是 $scope.number 的值
只要你能在视图中看到 {{number}} 的值，那么 ngModel 就没有问题。请通过复制您的问题提供 plunker url。
不客气 (plnkr) .. :)

标签： angularjs select angular-ngmodel

【解决方案1】：

如果 ngModel 的 viewValue 不匹配任何选项，则控件将自动添加一个“未知”选项，然后解决不匹配时删除。

文档here

通常，如果模型的值与其中一个选项的值匹配，则角度会选择一个选项。

10 的值为 10 和数据类型字符串，其中您的 $scope.number = 10 使其值为 10 的数字类型。

所以模型的值不匹配。

在您的控制器中尝试 $scope.number = '10'，它会起作用。

【讨论】：

【解决方案2】：

$scope.number = 5+"";

在你的控制器中添加这个语句而不是 $scope.number=5 因为选项的值是字符串

【讨论】：

【解决方案3】：

您有 $scope.number=5。你应该有

$scope.number = '5'   // a string. Change 5 to '5'

【讨论】：

【解决方案4】：

你可以试试这个方法

<select name="mydata" ng-model="number" 
    ng-options="value for value in [5,10,20,25]">
</select>

在控制器中

$scope.number = 20;

【讨论】：

它就是这样工作的。你知道为什么在我不使用 ng-options 的情况下它不起作用吗？
我认为因为选项值只能取值字符串所以如果你把 $scope.number = '20';那么你的html就可以了。否则你需要使用 ng-options