Question

我在controller.js中的对象

$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)", "selected" : "false"},
                    {"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"}
                ]
            }
        ];

我正在尝试使用ng-option将此对象渲染为select，这里是我在.html文件中的代码

<select ng-model="military" ng-options="value.options[key].name group by value.label for (key,value) in militaryObject"></select>

这不适合我，它给我这个

<select ng-model="military" ng-options="value.options[key].name group by value.label for (key,value) in militaryObject" class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched">
    <optgroup label="U.S. Air Force">
        <option label="Active Duty" value="object:9">Active Duty</option>
    </optgroup>
    <optgroup label="U.S. Army">
        <option label="Selective Reserve" value="object:10">Selective Reserve</option>
    </optgroup>
    <optgroup label="U.S. Coast Guard">
        <option label="Spouse" value="object:11">Spouse</option>
    </optgroup>
    <optgroup label="U.S. Marine Corps">
        <option label="Veteran" value="object:12">Veteran</option>
    </optgroup>
    <optgroup label="U.S. Navy">
        <option label="Civilian" value="object:13">Civilian</option>
    </optgroup>
    <optgroup label="U.S. Department of Defense">
        <option label="undefined" value="object:14"></option>
    </optgroup>
</select>

它不会渲染选项数组中的所有对象。请告诉我我做错了什么请帮忙！！！提前致谢

Answer 1

这就是我们如何针对这个复杂的对象渲染模板，它基本上是通过使用嵌套的ng-repeat

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

ng-options具有对象的复杂多维数组

1 个答案: