我可以自定义选择以显示与我选择的值不同的选定值

Question

我需要在通常的选择控件中显示层次结构。我通过在选项标签内使用\ u00A0来实现这一点。

层次结构如下所示：

Audi
  - A1
  - A2
  - A3
  - A4
Ford
  - Galaxy
  - Mondeo
  - Focus

但是当选择值时我需要显示整个值（例如“奥迪 - A4”）。如果我再次展开选择，我仍然需要选择“ - A4”的初始选项列表。 Js /角度解决方案在这里很好。 请，建议。

Answer 1

获得此层次结构的最佳方法是使用ng-options指令中的分组，请参阅plunker。

$scope.values = [
  { id: 1, make: 'Audi', type: 'A1' }, 
  { id: 2, make: 'Audi', type: 'A2' },
  { id: 3, make: 'Audi',type: 'A3' },
  { id: 4, make: 'Audi', type: 'A4' },
  { id: 5, make: 'Ford', type: 'Galaxy' },
  { id: 6, make: 'Ford', type: 'Mondeo' },
  { id: 7, make: 'Ford', type: 'Focus' }
];
$scope.selectedId = 1;

然后

<select ng-options="item.id as item.make + ' ' + item.type group by item.make for item in values" ng-model="selectedId"></select>

这个选项中的汽车全名，按制造商分组，但是，各个选项都有汽车的全名。