Question

使用<select>时，我无法让<option>显示正确的ng-value。

假设：

$scope.EDef.One = "1";
$scope.EDef.Six = "6";
$scope.EDef.Ten = "10";

$scope.modelOne = "1";
$scope.modelTwo = "1";

和

<p>ModelOne = {{modelOne}}</p>
<select ng-model='modelOne'>
  <option value="1">It is One</option>
  <option value="6">It is six</option>
  <option value="10">It is ten</option>
</select>

<p>ModelTwo = {{modelTwo}}</p>
<select ng-model='modelTwo'>
  <option ng-value="{{EDef.One}}">It is One</option>
  <option ng-value="{{EDef.Six}}">It is six</option>
  <option ng-value="{{EDef.Ten}}">It is ten</option>
</select>

正确选择了modelOne的<select>，但不适用于modelTwo。为什么不呢？

此处的Plunker：https://plnkr.co/edit/x3GzeSXvmvaMS4dGuArs

由于

修改

进一步检查，ng-value在设置单选按钮时可以正常工作：

<p>ModelOne = {{modelOne}}</p>
<input type="radio" name='m1' ng-model='modelOne' value="1">One
<input type="radio" name='m1' ng-model='modelOne' value="6">Six
<input type="radio" name='m1' ng-model='modelOne' value="3">Ten

<p>ModelTwo = {{modelTwo}}</p>
<input type="radio" name='m2' ng-model='modelTwo' ng-value="{{EDef.One}}">One
<input type="radio" name='m2' ng-model='modelTwo' ng-value="{{EDef.Six}}">Six
<input type="radio" name='m2' ng-model='modelTwo' ng-value="{{EDef.Ten}}">Ten

https://plnkr.co/edit/zKGUaMMfzdzNbnXRRoqz?p=preview

Answer 1

您应该使用ng-selected =“OptOne”来指定默认选项。

$scope.OptOne = "1";
$scope.OptSix = "6";
$scope.OptTen = "10";

$scope.modelOne = "1";
$scope.modelTwo = "1";

和html

<p>ModelTwo = {{modelTwo}}</p>
<select ng-model="modelTwo">
  <option ng-selected="OptOne" ng-value="OptOne">It is One</option>
  <option ng-value="OptSix">It is six</option>
  <option ng-value="OptTen">It is ten</option>
</select>

<强>更新：

<select ng-model="modelTwo">
  <option ng-selected="modelTwo == OptOne" ng-value="OptOne">It is One</option>
  <option ng-selected="modelTwo == OptSix" ng-value="OptSix">It is six</option>
  <option ng-selected="modelTwo == OptTen" ng-value="OptTen">It is ten</option>
</select>

使用ng-value时未选择<option>

1 个答案: