素材巴巴 > 程序开发 >

angularjs速成学习个人理解_8form中的下拉框

程序开发 2023-09-04 06:44:56

在开发中下拉框往往会做成组件化。angular可以灵活的给下拉框赋值或选取值、选取对象。


 

方式一:直接在option上循环

给定数据如下:数据是一个数组。

				$scope.cars = [{brand:"BMW",name:"宝马"},{brand:"Benz",name:"奔驰"},{brand:"Audi",name:"奥迪"}];
 
通过ng-model获取选择的值,如下:
			

Selected Car: {{selectedCar}}


运行结果比较简单。

方式二:for 。。。in语法。可以获取更多的对象信息。

首先封装数据如下:

				$scope.cars = [{brand:"BMW",name:"宝马",color:"Red"},{brand:"Benz",name:"奔驰",color:"Green"},{brand:"Audi",name:"奥迪",color:"Blue"}];
 

通过在select标签中加入ng-option语法实现。ng-options="car.brand for car in cars">。car.brand作为value值标签如下:

			

Selected: {{selectedCar.color}} {{selectedCar.name}}

生成的html代码:.

方式三:x from (x, y)  in 语法。

选择的值将会是一个对象。数据如下:

				$scope.cars = {BMW: {name:"宝马",color:"红色"},Benz: {name:"奔驰",color:"蓝色"},Audi: {name:"奥迪",color:"绿色"}};
 

key是BMWBenzAudi.    value是对应的对象。
			

Selected: {{selectedCar.color}} {{selectedCar.name}}


完整代码如下:

Select - AngularJS Test

Selected Car: {{selectedCar}}

Selected Color: {{selectedColor}}

Selected: {{selectedCar.color}} {{selectedCar.name}}

Selected: {{selectedCar.color}} {{selectedCar.name}}






标签:

上一篇: NGUI-UI Grid 对比 layer grid 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。