Was wäre angular ng-option äquivalent zu dieser Auswahl?

Question

Ich kämpfe darum, dies zu einer ng-Option zu machen. Ist es überhaupt möglich?

<select ng-model="detail_type_id"> 
    <optgroup ng-repeat="type in data.detailTypes" label="{{type.name}}"> 
     <option ng-repeat="t in type.children" value="{{t.id}}">{{t.name}}</option> 
    </optgroup> 
</select> 

DetailTypes sieht wie folgt aus:

[ 
{"id":7, 
    "parent_id":null, 
    "name":"Contact", 
    "children":[ 
    {"id":8, 
     "parent_id":7, 
     "name":"Address", 
     "children":[] 
    }, 
    {"id":12, 
     "parent_id":7, 
     "name":"Something else", 
     "children":[] 
    } 
    ]}, 
{"id":16, 
    "parent_id":null, 
    "name":"Other", 
    "children":[ 
    {"id":10, 
     "parent_id":16, 
     "name":"Remarks", 
     "children":[]} 
    ] 
} 
] 

Child-ID ausgewählt werden muss. Die Verschachtelung kann nicht tiefer sein.

Answer 1

Die Direktive ngOptions funktioniert nicht mit mehrdimensionalen Objekten. Sie müssen also Ihr Array reduzieren, um es zu verwenden.

schrieb ich einen Filter für das:

<select ng-model="detail_type_id" 
     ng-options="item.id as item.name 
        group by item.groupName for item 
        in data.detailTypes | flatten track by item.id"> 
</select> 

Plunker (Version # 1 mit Filter):

app.filter('flatten' , function(){ 
    return function(array){ 
    return array.reduce(function(flatten, group){ 
     group.children.forEach(function(child){ 
     child.groupName = group.name; 
     flatten.push(child) 
     }) 
     return flatten; 
    },[]); 
    } 
}) 

und die HTML-Teil so sein würde https://plnkr.co/edit/dxi7j8oxInv2VRJ1aL7F

Ich modifizierte auch Ihr Objekt, um so zu sein:

[{ 
    "id": 7, 
    "parent_id": null, 
    "name": "Contact", 
    "children": [{ 
    "id": 8, 
    "parent_id": 7, 
    "name": "Address", 
    "children": [] 
    }, { 
    "id": 12, 
    "parent_id": 7, 
    "name": "Something else", 
    "children": [] 
    }] 
}, { 
    "id": 16, 
    "parent_id": null, 
    "name": "Other", 
    "children": [{ 
    "id": 10, 
    "parent_id": 16, 
    "name": "Remarks", 
    "children": [] 
    }] 
}] 

EDIT:

Nach Vorschlag, den ich eine andere Version ohne die Filter geschrieben, aber das Array in der Steuerung Abflachung.

zusätzlichen Controller JS:

$scope.flattenDetailTypes = flattenDetailTypes($scope.data.detailTypes); 

    function flattenDetailTypes(array){ 
    return array.reduce(function(flatten, group){ 
     group.children.forEach(function(child){ 
     child.groupName = group.name; 
     flatten.push(child) 
     }) 
     return flatten; 
    },[]); 
    } 

Markup:

<select ng-model="detail_type_id" 
     ng-options="item.id as item.name group by item.groupName for item in flattenDetailTypes track by item.id"></select> 

Plunker (Version # 2 ohne Filter): https://plnkr.co/edit/D4APZ6