AngularJS中下拉框的高级用法示例
时间:2019-04-07
本文章向大家介绍AngularJS中下拉框的高级用法示例,主要包括AngularJS中下拉框的高级用法示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了AngularJS中下拉框的高级用法。分享给大家供大家参考,具体如下:
HTML正文:
<body ng-app="myApp"> <!-- 对象内部属性遍历:x--key y---value --> <div ng-controller="myctr01"> {{sites}}<br> <select ng-model="site" ng-options="x for (x, y) in sites"></select> 选择的网址:<span>{{site}}</span> </div> <div ng-controller="myCtrl"> <p>选择一辆车:</p> <!-- 这里y标识成员元素对象,并且使用该对象的brand属性作为显示文本,select的值与y绑定 --> <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select> <p>你选择的是: {{selectedCar.brand}}</p> <p>型号为: {{selectedCar.model}}</p> <p>颜色为: {{selectedCar.color}}</p> <p>下拉列表中的选项也可以是对象的属性。</p> </div>
Javascript操作代码:
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { //复杂对象 $scope.cars = { car01 : {brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Fiat", model : "500", color : "white"}, car03 : {brand : "Volvo", model : "XC90", color : "black"} } //简单对象 $scope.sites = { site01 : "Google", site02 : "Baidu", site03 : "Taobao" }; }); app.controller("myctr01",function($scope){ $scope.sites = { site01 : "Google", site02 : "Baidu", site03 : "Taobao" }; });
效果:
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SQL注入
- CSS实现垂直居中布局
- Js实现链表操作
- 性能优化漫谈(一):无代码调优
- C++职责链模式
- Newbe.Claptrap 框架入门,第四步 —— 利用 Minion,商品下单
- 使用 NextCloud + COS 搭建个人网盘
- Shader基础技巧整理
- 隐秘的物理粒子系统与渲染 !Cocos Creator LiquidFun !
- 一起用Gradle Transform API + ASM完成代码织入呀~
- 掩盖浏览痕迹不会被发现的方法【逗】
- webpack实战——样式预处理
- 前端防止浏览器访问旧版 js 和 css 的优化思路
- 少数派实测报告:AI巨无霸模型GPT-3 | 附送API 调用方法「AI核心算法」
- Qt音视频开发19-海康sdk录像存储