javascript - 使用 angularjs 从选择选项组中预选择一个选项

Question

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>

Controller 中的对象

$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"}
            ]
        }
    ];

我想在 View 之间切换时保持 View 的状态。因此，当用户选择一个选项并移动到下一个 View ，然后返回到上一个 View 时，他之前选择的选项应该被预先选择。

简而言之，我想从具有选项组的选择中预先选择一个选项。

Answer 1

We can pre-select an option

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>

In controller:

$scope.military = 'AF - Civilian';