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

Question

I need to show hierarchy in the usual select control. I implemented this by using \  inside of the option labels.

The hierarchy looks like this:

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

But when the value selected I need to show the whole value (for ex. "Audi - A4"). And if I expand the select again I still need to see the initial options list with "- A4" selected. Js/angular solution is fine here. Please, advice.

Answer 1

The best way to get this hierarchy is to use the grouping in ng-options directive, see 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;

and then

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

This has the full name of the car in the select, groups by the make, but still, the individual options have the full name of the car.