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];

但那只能选择第一项。

似乎问题在于我有一组国家，但我想要的模型只是单数文本。理想情况下，我想将所选内容设置为添加到模型对象中，因此当我保存时，我可以将“model”传递给我的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和Cho in angular。

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

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

如何在下拉列表中预选所选项目？ [角]

3 个答案: