Что было бы угловым эквивалентом ng-option этого выбора?

Question

Я изо всех сил пытаюсь превратить это в опцию ng. Возможно ли это?

<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 выглядит следующим образом:

[ 
{"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":[]} 
    ] 
} 
] 

Детский идентификатор должен быть выбран. Вложенность не может быть глубже.

Answer 1

Директива ngOptions не работает с многомерными объектами. Поэтому вам нужно сгладить свой массив, чтобы использовать его.

Я написал фильтр для этого:

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; 
    },[]); 
    } 
}) 

И в HTML часть будет выглядеть так:

<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 (версия # 1 с фильтром): https://plnkr.co/edit/dxi7j8oxInv2VRJ1aL7F

Я также изменил ваш объект таким образом:

[{ 
    "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:

После внушения я написал еще одну версию без фильтра, но уплощение массив внутри контроллера.

Дополнительный контроллер 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; 
    },[]); 
    } 

разметки:

<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 (версия # 2 без фильтра): https://plnkr.co/edit/D4APZ6