代码之家 › 专栏 › 技术社区 › Praveesh P

如何使用AngularJS显示选择下拉列表中的部分?[副本]

angularjs-select angularjs-ng-options angularjs

Praveesh P · 技术社区 · 7 年前

这个问题已经有了答案:

Angularjs: ng-options group by 3个答案
Working with select using AngularJS's ng-options 8个答案
How to add a header in dropdown list (with ng-options Demo) 4个答案

有一个选择下拉列表,当前显示值列表(所有汽车品牌)。新的要求是在同一个“选择”下拉列表中包含部分,以便在一个部分下显示一组新的值(通用汽车品牌)以及现有的值(所有汽车品牌)。

如何使用AngularJS实现这一点?

现有代码:

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

1 回复 | 直到 7 年前

Praveesh P 7 年前

这个成功了:)

如果我们有每个值部分的列表,我们可以将其显示为:

<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>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前