[角度]

Question

我目前在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-model更改为"selectedItem“，然后在控制器中写道：

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

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

似乎问题是我有一个国家的集合，但我想要的模型只是一个单一的文本。理想情况下，我希望设置要添加到model对象的选定对象，这样在保存时，只需将"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编写的富有洞察力的指南，我对angular中的ng-options和Select有了更多的了解。

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

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