angularjs速成学习个人理解_8form中的下拉框
程序开发
2023-09-04 06:44:56
在开发中下拉框往往会做成组件化。angular可以灵活的给下拉框赋值或选取值、选取对象。
方式一:直接在option上循环
给定数据如下:数据是一个数组。
通过ng-model获取选择的值,如下:$scope.cars = [{brand:"BMW",name:"宝马"},{brand:"Benz",name:"奔驰"},{brand:"Audi",name:"奥迪"}];
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
下一篇:
相关文章
-
无相关信息