如何使用AngularJS在选择下拉列表中显示部分? [英] How to display sections within a select dropdown using AngularJS?

问题描述

有一个选择下拉列表，当前显示值列表(所有汽车品牌").新的要求是在相同的选择下拉列表中具有各个部分，以便在一个部分下并与现有的(所有汽车品牌)一起显示一组新值(通用汽车品牌).

There is a select dropdown that currently displays a list of values (All Car Makes). The new requirement is to have sections within the same select dropdown, so that it shows a new set of values (Common Car Makes) under a section and along with the existing (All Car Makes).

如何使用AngularJS来实现?

How can this be achieved using AngularJS?

现有代码:

<select ng-model="vm.vehicleSelection.selected.make" 
  ng-options="m for m in vm.vehicleSelection.makes">
  <option value="">Please select</option>
</select>

推荐答案

此方法有效:)

如果每个值部分都有一个列表，则可以将其显示为:

If we have a list for each section of values, we can display it as :

<select 
ng-model="vm.vehicleSelection.selected.make" >
 <option value="">Please select</option>
 <optgroup label="Common Car Makes">
  <option ng-repeat="commonMake in vm.vehicleSelection.commonMakes" ng-value="commonMake">{{commonMake}}</option>
 </optgroup>

 <optgroup label="All Car Makes">
  <option ng-repeat="make in vm.vehicleSelection.makes" ng-value="make">{{make}} 
  </option>
 </optgroup>
</select>

这篇关于如何使用AngularJS在选择下拉列表中显示部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！