如何在下拉列表中预先选择所选项目?[角度]

How do I pre-select the selected item in a dropdown list? [Angular]

本文关键字：项目 选项 角度 选择 下拉列表      更新时间：2023-09-26

我目前有一个服务处于angular状态，它会向我返回一个状态列表。阵列如下：

model.Address.StateList = [
     { Disabled: false,
       Group: null,
       Selected: false,
       Text: "CA",
       Value: "1"
      },
 { Disabled: false,
       Group: null,
       Selected: false,
       Text: "IL",
       Value: "2"
      },
      { Disabled: false,
       Group: null,
       Selected: false,
       Text: "NJ",
       Value: "3"
      }
]

我也从服务中返回他们实际选择的状态，看起来像这样：

 model.Address.State = "CA"

我已经搜索了stackoverflow，试图找到一种方法来实现这一点，但我不知道如何在列表中预先选择值。

我试过这个：

<select id="State" ng-model="model.Address.State" ng-change="changeState(model.Address.State)" ng-options="option as option.Text for option in model.Address.StateList track by option.Value"></select>

但这并没有预先选择第一项。

我让它工作的一种方法是将ng模型更改为"selectedItem"，并在控制器中写道：

   $scope.selectedItem = responseModel.Address.StateList[0];

但这只是挑选第一项。

问题似乎是我有一个国家汇编，但我想要的模式只是单一的文本。理想情况下，我想将所选的设置为添加到模型对象中，这样当我保存时，我就可以将"模型"与我需要的所有值一起传递给我的api。

要用于ng-model的值应与在ng-options中使用的值匹配。例如：

model.Address.State = "CA"; // matches the Text property
<select id="State" ng-model="model.Address.State" ng-options="option.Text for option in model.Address.StateList"></select>

如果你想使用Value，你需要匹配它们：

model.Address.State = "1"; // matches the Value property
<select id="State" ng-model="model.Address.State" ng-options="option.Text as option.Value for option in model.Address.StateList"></select>

希望能有所帮助。

有关可能的解决方案，请参阅此JSFiddle。

我在那里使用了一个作用域变量selectedState，并在ng-model属性中使用它，但如果您愿意，可以将其替换为model.Address.State。

由于将model.Address.State与ngModel指令绑定并使用track by option.Value，因此可以将model.Address.State的值设置为要设置为活动的选项的值：

model.Address.State = "1";

如果您想使用"CA"，您可以将ng-model更改为当前范围的属性：

<select ng-model="model.Address.State" ng-options="option.Text as option.Text for ... track by Text" ...>
$scope.selectedState = "CA";

我想通了！

多亏了这里写的有见地的指南，我能够更多地了解ng选项和角度选择。

最终的问题是，我需要指定下拉列表中显示的文本与模型中的文本相匹配。使其工作的最终代码是：

 <select id="State" ng-model="model.Address.State" ng-options="option.Text as option.Text for option in model.Address.StateList"></select>
相关文章：