[英]How do I pre-select the selected item in a dropdown list? [Angular]
I currently have a service in angular returning me a list of states. 我目前在角度服务中向我返回状态列表。 The array looks like this:
该数组如下所示:
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"
}
]
I am also returning from the service the state they actually choose which looks like this: 我还从服务中返回了他们实际选择的状态,如下所示:
model.Address.State = "CA"
I have scoured stackoverflow trying to find a way to make this work but I can't figure out how to pre-select the value in the list. 我搜寻了stackoverflow,试图找到一种方法来完成这项工作,但是我不知道如何在列表中预先选择值。
I have tried this: 我已经试过了:
<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>
But that does not pre-select the first item. 但这并不会预先选择第一项。
The one way I have got it to work is changing ng-model to "selectedItem" and in the controller I wrote: 我使用它的一种方法是将ng-model更改为“ selectedItem”,并在我编写的控制器中:
$scope.selectedItem = responseModel.Address.StateList[0];
But that only picks the first item. 但这只能选择第一个项目。
It seems that the problem is that I have a collection of States but the model I want is just the singular text. 似乎问题是我有一个国家集合,但我想要的模型只是单数形式。 And ideally I'd like to set the selected to be added to the model object so when I save I can just pass "model" to my api with all the values I need.
理想情况下,我想将选定的对象设置为添加到模型对象,以便在保存时可以将“模型”与所有需要的值传递给我的api。
See this JSFiddle for a possible solution. 有关可能的解决方案,请参见此JSFiddle 。
I am using a scope variable selectedState
there and use it in the ng-model
attribute, but you can replace that with model.Address.State
if you prefer. 我在这里使用范围变量
selectedState
并在ng-model
属性中使用它,但是如果愿意,可以将其替换为model.Address.State
。
Since you bind model.Address.State
with the ngModel
directive and use track by option.Value
, you can set the value of model.Address.State
to the value of the option that you want to set active: 既然你绑定
model.Address.State
与ngModel
指令,并使用track by option.Value
,你可以的值设置model.Address.State
到要设置活动选项的值:
model.Address.State = "1";
If you want to use "CA"
instead, you can change your ng-model
to a property of the current scope: 如果要改用
"CA"
,则可以将ng-model
更改为当前作用域的属性:
<select ng-model="model.Address.State" ng-options="option.Text as option.Text for ... track by Text" ...>
$scope.selectedState = "CA";
The value that you want to use for ng-model
should match the value that you use in ng-options
. 您要用于
ng-model
的值应与您在ng-options
使用的值匹配。 For example: 例如:
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>
If instead you want to use Value
, you need to match them up: 相反,如果要使用
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>
Hope that helps. 希望能有所帮助。
I figured it out! 我想到了!
Thanks to the insightful guide written HERE I was able to understand a little more about ng-options and Select in angular. 多亏了这里写的有见地的指南,我才能够对ng-options和Select in angular有更多的了解。
What ended up being the problem is that I need to specify that the text shown in the dropdown list matches the text in the model. 最终成为问题的是,我需要指定下拉列表中显示的文本与模型中的文本匹配。 The final code that made it work was:
使它起作用的最终代码是:
<select id="State" ng-model="model.Address.State" ng-options="option.Text as option.Text for option in model.Address.StateList"></select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.