如何预先选择下拉列表中的选定项目？ [角度]

Question

我目前有一个角度服务向我返回状态列表。数组如下所示：

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-model 更改为“selectedItem”，并在控制器中我写道：

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

但这只会选择第一个项目。

似乎问题在于我有一组状态，但我想要的模型只是单数文本。理想情况下，我想将选定的对象设置为添加到模型对象中，这样当我保存时，我可以将“模型”传递给我的 api，其中包含我需要的所有值。

Answer 1

请参阅this 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";

Answer 2

您要用于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>

希望对您有所帮助。

Answer 3

我想通了！

感谢HERE 编写的富有洞察力的指南，我能够更多地了解 ng-options 和 Select in angular。

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

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