javascript - 如何在使用 AngularJS 提交 <select> 时绑定(bind)、填充和获取选定值

Question

我在范围内有一个 JSON 对象，如下所示:

  $scope.colors = [
    {'colorCode': 'R', 'colorName': 'Red'},
    {'colorCode': 'Y', 'colorName': 'Yellow'},
    {'colorCode': 'P', 'colorName': 'Pink'},
  ];

我想绑定(bind)一个 <select>让它看起来像这样

<select>
   <option value="R">Red</option>
   <option value="Y">Yellow</option>
   <option value="P">Pink</option>
</select>

我所做的是这样的:

<select
   ng-model="model.selectedcolor"
   ng-options="c.colorCode as c.colorName for c in colors">
</select>

但是，当我检查 html 时，它正在创建这样的 HTML:

<select>
   <option value="0">Red</option>
   <option value="1">Yellow</option>
   <option value="2">Pink</option>
</select>

问题

1. 如何预选下拉列表中的第二项(在本例中为黄色)
2. 我怎样才能拥有value="R"...在 HTML 中
3. 当我提交表单时，我是否能够通过 $scope.model.selectedcolor 获取选定的值？ ？

Answer 1

ng-options可以说是比 ng-repeat 更好的选择-ing <option> .这是因为 ng-model可以绑定(bind)到一个对象(value as 值)。

您已正确指定它。

Angular 会在幕后正确映射选定的 <option>为您正确的对象赋值，您甚至不需要关心 value 是什么<option> 的属性设置为 - 这是为了回答您的问题#2。

在问题 #1 中，要(预)选择一个选项，请修改 ng-model -相应地绑定(bind)属性。这将“驱动” View 。在您的情况下，设置:

$scope.model.selectedcolor = "Y";

关于问题 #3，这取决于您所说的“提交表单”是什么意思。通常，您通常不会使用 SPA 向服务器提交表单(另一个原因，为什么您不应该关心 <option value="1"> 对于 "Y" )。 $scope.model.selectedcolor将设置为选定的 colorcode .

作为题外话:

您可以绑定(bind)您的 select到实际color对象，而不仅仅是 colorcode属性:

<select ng-model="model.selectedColor"
        ng-options="c as c.colorName for c in colors">
</select>

然后，就可以对整个对象进行操作了。例如，要预选和提交，您可以:

$scope.model.selectedColor = $scope.colors[1]; // second one is selected

$scope.submit = function(){
   var colorcode = $scope.model.selectedColor.colorcode;
   // post colorcode to server
}