AngularJS 使用ngOption实现下拉列表（angularjs 下拉框）

25-03-03 9

在本文中，我们将为您详细介绍AngularJS使用ngOption实现下拉列表的相关知识，并且为您解答关于angularjs下拉框的疑问，此外，我们还会提供一些关于angular实现下拉列表组件、an

在本文中，我们将为您详细介绍AngularJS 使用ngOption实现下拉列表的相关知识，并且为您解答关于angularjs 下拉框的疑问，此外，我们还会提供一些关于angular 实现下拉列表组件、angular 实现下拉列表组件的示例代码、AngularJS ngOption 配置、AngularJS ngOptions排序数组的有用信息。

本文目录一览：

AngularJS 使用ngOption实现下拉列表（angularjs 下拉框）
angular 实现下拉列表组件
angular 实现下拉列表组件的示例代码
AngularJS ngOption 配置
AngularJS ngOptions排序数组

AngularJS 使用ngOption实现下拉列表（angularjs 下拉框）

下拉列表的简单使用

ng-option指令使用很简单，只需要绑定两个属性：

一个是ng-model用于获取选定的值；

另一个是ng-options用于确定下拉列表的元素数组。

<select ng-model="engineer.currentActivity"ng-options="act for act in activities"></select>

上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定，然后列表中的选项是activities中的每一个值。数据如下：

$scope.engineer = {
                name: "Dani",currentActivity: "Fixing bugs"
            };
         
            $scope.activities =
            [
                "Writing code","Testing code","Fixing bugs","Dancing"
            ];

运行结果如：

为了美观一点，这里引用了bootstrap。

View Code

复杂对象，自定义列表名称

有的时候下拉列表并不是单纯的字符串数组，可能是json对象，例如：

$scope.activities =
             [
                 { id: 1,type: "Work",name: "Writing code" },{ id: 2,name: "Testing code" },{ id: 3,name: "Fixing bugs" },{ id: 4,type: "Play",name: "Dancing" }
             ];

这个时候，绑定的数据就必须是与这里面的格式相同的数据，比如直接复制其中一条：

$scope.engineer = {
                 name: "Dani",currentActivity: {
                     id: 3,name: "Fixing bugs"
                 }
             };

当然也可以直接指定成：

$scope.engineer = {currentActivity:activities[3]}

然后在指令中可以循环列表拼接处下拉框的名称

<select 
        ng-model = "engineer.currentActivity"ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
</select >

运行效果如：

全部的代码如下：

<html ng-app="myApp">
<head>
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController">
        <div>
        {{engineer.name}} is currently: {{ engineer.currentActivity}}
        </div>
        <div>
            <label for="name">Choose a new activity:</label>            
            <select 
            ng-model = "engineer.currentActivity"ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                 name: "Dani",name: "Fixing bugs"
                 }
             };
         
             $scope.activities =
             [
                 { id: 1,name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>

实现下拉列表的分组

其实分组与前面的例子很像，只要把空间中的ng-options的值换成下面：

<select ng-model = "engineer.currentActivity"ng-options = "a.name group by a.type for a in activities" >               
</select >

添加group by就会按照后面的值进行分组

全部代码：

<html ng-app="myApp">
<head>
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController">
        <div>
        {{engineer.name}} is currently: {{ engineer.currentActivity}}
        </div>
        <div>
            <label for="name">Choose a new activity:</label>            
            <!-- <select 
            ng-model = "engineer.currentActivity"ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
            </select >  -->
            <select ng-model = "engineer.currentActivity"ng-options = "a.name group by a.type for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>

按照id进行标识

由于之前的ng-model相当于初始的时候给设定了一个值。当你选择一个下拉列表选项的时候，就会覆盖掉这个初始值。

所以更多的时候会使用一个id进行标识，这样在初始化赋值的时候，只需要设定一个id就可以了。

$scope.engineer = {
                 currentActivityId: 3
             };
         
             $scope.activities =
             [
                 { id: 1,name: "Dancing" }
             ];

指令可以写成下面的格式

<select 
       ng-model = "engineer.currentActivityId"ng-options = "a.id as a.name group by a.type for a in activities" >               
</select >

通过 as 前面的值，就可以确定唯一的一个选项

全部代码如下：

<html ng-app="myApp">
<head>
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController">
        <div>
        current is: {{ engineer.currentActivityId}}
        </div>
        <div>
            <label for="name">Choose a new activity:</label>            
            <select 
                ng-model = "engineer.currentActivityId"ng-options = "a.id as a.name group by a.type for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",function($scope){
            $scope.engineer = {
                 currentActivityId: 3
             };
         
             $scope.activities =
             [
                 { id: 1,name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>

参考

Using ngOptions in AngularJS:http://odetocode.com/blogs/scott/archive/2013/06/19/using-ngoptions-in-angularjs.aspx

angular 实现下拉列表组件

需求：

方案一

最开始就是用最简单的方法，前台请求数据，然后通过select和option在页面上显示，但是写了一会儿发现出现了许多类似下面的重复的代码：

// 初始化年级选项
initGradeOptions() {
    this.gradeService.getAll().subscribe((res) => {
        this.gradeOptions = res;
    }, () => {
        console.log(''get gradeOption error'');
    });
}
<nz-select nzPlaceHolder="请选择所属年级" formControlName="grade">
   <nz-option *ngFor="let grade of gradeOptions" [nzLabel]="grade.name"
              [nzValue]="grade"></nz-option>
</nz-select>

每写一个列表都要写请求它的数据的方法和模板中的内容，非常繁琐。

方案二

因为在项目中，不止一个地方用到了这样的列表，所以就想着把这些列表单独拿出来，写成组件。
这里就参考了朴世超组长的angular的输入与输出写了这个组件
思路大概如下：

ts:

@Input() defaultValue: Grade;                       // 选中的值
@Output() selected = new EventEmitter<number>();    // 输出属性
datas: Grade[];                                     // 所有数据

constructor(private gradeService: GradeService) {
}

// 请求所有的数据
ngOnInit() {
    this.gradeService.getAll().subscribe((res) => {
        this.datas = res;
    }, () => {
        console.log(''error'');
    });
}

// 当则内容更改时，将已选中对象的id弹射到父组件绑定的事件上
dataChange() {
    this.selected.emit(this.defaultValue);
}

html:

<nz-select nzPlaceHolder="所属年级"[(ngModel)]="defaultValue" (ngModelChange)="dataChange()">
<nz-option *ngFor="let data of datas" [nzLabel]="data.name"
           [nzValue]="data"></nz-option>
 </nz-select>

ps: 默认选中的功能还在完善，待更新

思考

当我照着上面的套路继续写collegeList,majorList,klassList，以后还会有teacherList,studentList等等，这样不也形成了很多重复的代码吗？
于是我就想能不能设计一个组件：
我让它是什么列表，它就是什么列表。
然后我就寻找这几个组件的共性，发现它们请求数据的的特点：

都是使用get请求
返回的数据都是数组
url只有最后一项不同

那么，我只要传给组件一个url数组，就能根据url请求对应的数据，再生成相应的模板

方案三(失败)

子组件ts:

@Input() urls: String[][] = [];                 // 保存传递过来的url
datas: String[][] = [];                         // 保存查询结果
@Input() titles: String[][] = [];               // 保存提示语句
@Output() selectItems = new EventEmitter();     // 已选中的对象
index = 0;
items = [];

constructor(public dataService: DataService) {
}


ngOnInit() {
    this.getData(this.index);
}

getData(index: number): void {
    if (index < this.urls.length) {
        const url = this.urls[index];
        this.dataService.getAllData(url).subscribe((res) => {
            this.datas[index] = res;
            console.log(this.datas);
        }, () => {
            console.log(''error'');
        });
    }
}

dataChange(i: number) {
    console.log(this.items);
    this.selectItems.emit(this.items);
    this.getData(i + 1);
}

子组件html:

<nz-select [nzPlaceHolder]="titles[i]"(ngModelChange)="dataChange(i)"
       [(ngModel)]="items[i]"
       *ngFor="let url of urls,let i = index">
<nz-option *ngFor="let item of datas[i]" [nzValue]="item" [nzLabel]="item.name">        
</nz-option>
</nz-select>

父组件ts:

url = [''Grade'', ''College'', ''Major''];
titels = [''年级'', ''学院'', ''专业''];

getSelectItems(event) {
    console.log(event);
}

父组件html:

        <app-grade-list 
        [urls]="url" 
        [titles]="titels" 
        (selectItems)="getSelectItems($event)">
        </app-grade-list>

效果：
图片描述
看起来还能用，但是再往后写就发现这样写有致命的缺陷。

每一个下拉框都是根据url生成的，使用时需要查找url
传给父组件的数据不知道数据与实体的对应关系
当存在级联时，使用该方案难度高，且不易维护。

总结

虽然这些下拉列表有一定的共性，并且可以抽象出一些公共的功能来实现，但本身设计略复杂，且使用效果并不好，最后还是放弃了第三个方案。

angular 实现下拉列表组件的示例代码

需求：

方案一

最开始就是用最简单的方法，前台请求数据，然后通过select和option在页面上显示，但是写了一会儿发现出现了许多类似下面的重复的代码：

// 初始化年级选项
initGradeOptions() {
  this.gradeService.getAll().subscribe((res) => {
    this.gradeOptions = res;
  }, () => {
    console.log(''get gradeOption error'');
  });
}
<nz-select nzPlaceHolder="请选择所属年级" formControlName="grade">
  <nz-option *ngFor="let grade of gradeOptions" [nzLabel]="grade.name"
       [nzValue]="grade"></nz-option>
</nz-select>

每写一个列表都要写请求它的数据的方法和模板中的内容，非常繁琐。

方案二

ts:

@Input() defaultValue: Grade;            // 选中的值
@Output() selected = new EventEmitter<number>();  // 输出属性
datas: Grade[];                   // 所有数据

constructor(private gradeService: GradeService) {
}

// 请求所有的数据
ngOnInit() {
  this.gradeService.getAll().subscribe((res) => {
    this.datas = res;
  }, () => {
    console.log(''error'');
  });
}

// 当则内容更改时，将已选中对象的id弹射到父组件绑定的事件上
dataChange() {
  this.selected.emit(this.defaultValue);
}

html:

<nz-select nzPlaceHolder="所属年级"[(ngModel)]="defaultValue" (ngModelChange)="dataChange()">
<nz-option *ngFor="let data of datas" [nzLabel]="data.name"
      [nzValue]="data"></nz-option>
 </nz-select>

ps: 默认选中的功能还在完善，待更新

思考

当我照着上面的套路继续写collegeList,majorList,klassList，以后还会有teacherList,studentList等等，这样不也形成了很多重复的代码吗？

于是我就想能不能设计一个组件：

我让它是什么列表，它就是什么列表。

然后我就寻找这几个组件的共性，发现它们请求数据的的特点：

都是使用get请求
返回的数据都是数组
url只有最后一项不同

那么，我只要传给组件一个url数组，就能根据url请求对应的数据，再生成相应的模板

方案三(失败)

子组件ts:

@Input() urls: String[][] = [];         // 保存传递过来的url
datas: String[][] = [];             // 保存查询结果
@Input() titles: String[][] = [];        // 保存提示语句
@Output() selectItems = new EventEmitter();   // 已选中的对象
index = 0;
items = [];

constructor(public dataService: DataService) {
}


ngOnInit() {
  this.getData(this.index);
}

getData(index: number): void {
  if (index < this.urls.length) {
    const url = this.urls[index];
    this.dataService.getAllData(url).subscribe((res) => {
      this.datas[index] = res;
      console.log(this.datas);
    }, () => {
      console.log(''error'');
    });
  }
}

dataChange(i: number) {
  console.log(this.items);
  this.selectItems.emit(this.items);
  this.getData(i + 1);
}

子组件html:

<nz-select [nzPlaceHolder]="titles[i]"(ngModelChange)="dataChange(i)"
    [(ngModel)]="items[i]"
    *ngFor="let url of urls,let i = index">
<nz-option *ngFor="let item of datas[i]" [nzValue]="item" [nzLabel]="item.name">    
</nz-option>
</nz-select>

父组件ts:

url = [''Grade'', ''College'', ''Major''];
titels = [''年级'', ''学院'', ''专业''];

getSelectItems(event) {
  console.log(event);
}

父组件html:

 <app-grade-list 
    [urls]="url" 
    [titles]="titels" 
    (selectItems)="getSelectItems($event)">
    </app-grade-list>

效果：

看起来还能用，但是再往后写就发现这样写有致命的缺陷。

每一个下拉框都是根据url生成的，使用时需要查找url
传给父组件的数据不知道数据与实体的对应关系
当存在级联时，使用该方案难度高，且不易维护。

总结

虽然这些下拉列表有一定的共性，并且可以抽象出一些公共的功能来实现，但本身设计略复杂，且使用效果并不好，最后还是放弃了第三个方案。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

angular 动态组件类型详解(四种组件类型)
Angular7创建项目、组件、服务以及服务的使用
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
angular6的table组件开发的实现示例
详解Angular中实现自定义组件的双向绑定的两种方法
浅谈angular2子组件的事件传递(任意组件事件传递)
详解Angular6学习笔记之主从组件
详解Angular动态组件

AngularJS ngOption 配置

for array data sources:
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
for object data sources:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object

AngularJS ngOptions排序数组

我一直在尝试使用ng-options来显示一个字体数组，这些字体按照数组中项目的值按字母顺序排序。

HTML

<select ng-options="font for font in webfonts | orderBy:'font'" name="fonts">
     <option value="">Choose a font</option>
</select>

$scope.webfonts = [ 
        'Abel','Crafty Girls','Lato','Average','Corben','Quicksand',... ];

我试过改变orderBy和其他东西的值。我已经阅读了documentation以及所有评论。

我错过了什么？这应该只适用于物体吗？

这是你需要做的：

<select ng-model="selected" ng-options="font for font in webfonts | orderBy:'toString()' " name="fonts">

>您需要添加ng-model以正确地使绑定适用于字符串列表。
>如果输入包含字符串列表，则可以使用toString()进行排序。由于orderBy的表达式可以是Getter函数。该函数的结果将使用<，=，>进行排序。操作符。

Demo

我们今天的关于AngularJS 使用ngOption实现下拉列表和angularjs 下拉框的分享就到这里，谢谢您的阅读，如果想了解更多关于angular 实现下拉列表组件、angular 实现下拉列表组件的示例代码、AngularJS ngOption 配置、AngularJS ngOptions排序数组的相关信息，可以在本站进行搜索。

本文标签：