AngularJS中下拉框的高级用法示例

本文实例讲述了AngularJS中下拉框的高级用法。分享给大家供大家参考，具体如下：

超文本标记语言正文：

body ng-app='myApp '！-对象内部属性遍历：x-key y-value-div ng-controller=' myctr 01 ' { sites } } br select ng-model=' site ' ng-options=' x for(x，y) in sites'/select选择的网址：span { { site } }/span/div ng-controller=' myCtrl ' p选择一辆车：/p！-这里y标识成员元素对象，并且使用该对象的品牌属性作为显示文本，选择的值与y绑定-选择ng-model=' selected car ' ng-options=' y .品牌为(x，y) in cars'/selectp你选择的是： {{selectedCar.brand}}/pp型号为： {{selectedCar.model}}/pp颜色为： {{selectedCar.color}}/pp下拉列表中的选项也可以是对象的属性/p/divJavascript。操作代码：

var app=angular.module('myApp '，[])；app.controller('myCtrl '，函数($scope) { //复杂对象$ scope.cars={ car01 : {品牌： '福特，型号： '野马，颜色： '红色}，car02 : {品牌： '菲亚特，型号： '500 ',颜色： '白色}，car03 : {品牌： '沃尔沃，型号： 'XC90 '，颜色： '黑色' } //简单对象$ scope。网站={网站01 : '谷歌'，网站02 : '百度'，网站03 : '淘宝' };});app . controller(' my ctrl 01 '，函数($ scope){ $ scope。网站={网站01 : '谷歌'，网站02 : '百度'，网站03 : '淘宝' };});效果：

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。