[英]Preselect an option from select option groups using angularjs
HTML:
<select id="military" name="military" ng-model="military" ng-change="militaryChange()" style="color: #000;">
<optgroup label="{{value.label}}" ng-repeat="(key,value) in militaryObject">
<option value="{{v.value}}" ng-repeat="(k,v) in value.options">{{v.name}}</option>
</optgroup>
</select>
控制器中的對象
$scope.militaryObject = [
{
label: "U.S. Air Force",
options: [
{"name": "Active Duty", "value": "AF - Active Duty (AD)"},
{"name": "Selective Reserve", "value": "AF - Selective Reserve (SR)"},
{"name": "Spouse", "value": "AF - Spouse of AD or SR"},
{"name": "Veteran", "value": "AF - Veteran"},
{"name": "Civilian", "value": "AF - Civilian"},
{"name": "Air National Guard", "value": "AF - Air National Guard"}
]
},{
label: "U.S. Army",
options: [
{"name": "Active Duty", "value": "AR - Active Duty (AD)"},
{"name": "Selective Reserve", "value": "AR - Selective Reserve (SR)"},
{"name": "Spouse", "value": "AR - Spouse of AD or SR"},
{"name": "Veteran", "value": "AR - Veteran"},
{"name": "Civilian", "value": "AR - Civilian"},
{"name": "Army National Guard", "value": "Army - Air National Guard"}
]
},{
label: "U.S. Coast Guard",
options: [
{"name": "Active Duty", "value": "CG - Active Duty (AD)"},
{"name": "Selective Reserve", "value": "CG - Selective Reserve (SR)"},
{"name": "Spouse", "value": "CG - Spouse of AD or SR"},
{"name": "Veteran", "value": "CG - Veteran"},
{"name": "Civilian", "value": "CG - Civilian"}
]
},{
label: "U.S. Marine Corps",
options: [
{"name": "Active Duty", "value": "MC - Active Duty (AD)"},
{"name": "Selective Reserve", "value": "MC - Selective Reserve (SR)"},
{"name": "Spouse", "value": "MC - Spouse of AD or SR"},
{"name": "Veteran", "value": "MC - Veteran"},
{"name": "Civilian", "value": "MC - Civilian"}
]
},{
label: "U.S. Navy",
options: [
{"name": "Active Duty", "value": "NV - Active Duty (AD)"},
{"name": "Selective Reserve", "value": "NV - Selective Reserve (SR)"},
{"name": "Spouse", "value": "NV - Spouse of AD or SR"},
{"name": "Veteran", "value": "NV - Veteran"},
{"name": "Civilian", "value": "NV - Civilian"}
]
},{
label: "U.S. Department of Defense",
options: [
{"name": "DoD Civilian", "value": "DoD - Civilian"}
]
}
];
我希望在它們之間切換時保持我的視圖狀態。 因此,當用戶選擇一個選項並移動到下一個視圖然后返回到前一個視圖時,應該預先選擇之前選擇的選項。
簡而言之,我想從具有選項組的選擇中預先選擇一個選項。
我們可以預先選擇一個選項
HTML:
<select id="military" name="military" ng-model="military" ng-change="militaryChange()" style="color: #000;">
<optgroup label="{{value.label}}" ng-repeat="(key,value) in militaryObject">
<option value="{{v.value}}" ng-repeat="v in value.options">{{v.name}}</option>
</optgroup>
</select>
在控制器中:
$scope.military = 'AF - Civilian';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.