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

2024-09-29 14:15:15

本文实例讲述了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程序设计有所帮助。

AngularJS使用ngOption实现下拉列表的实例代码

下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. <select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select> 上面这条语句就是把选择
angularjs下拉框空白的解决办法

搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: <select class="form-control" ng-model="UserState" ng-init="UserState=0"> <option value="-1">选择状态</option> <option value="0">
Angularjs实现带查找筛选功能的select下拉框示例代码

前言对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功
AngularJS service之select下拉菜单效果

本文实例为大家分享了service之select下拉菜单效果的具体代码,供大家参考,具体内容如下  <!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="myCtrl"> <head> <meta charset="utf-8"> <
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)

注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求. 1.实现上图页面所有元素,页面布局规整,跟上图效果一致 2.实现文案显示,按效果显示 3.实现查询,实现查询敏感词过滤,实现查询后列表变化 4.实现倒序,实现正序,下拉列表排序效果都实现 5.按钮背景一致,按钮样式 6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员后能显示在表格内,已存在球员判重. 7.表格样式跟上图样式一致代码: <!DOCTYPE html> <html lang
AngularJS实现的select二级联动下拉菜单功能示例

本文实例讲述了AngularJS实现的select二级联动下拉菜单功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <script src="../script/angular.js"
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式,有双向绑定,指令等特性,这是具有革命性的.我是多么反感jQuery 用选择器选择元素 ,绑定事件,进行一大堆DOM操作,一旦代码过多,非常不好维护,html结构改变,又要重写js代码,不过 jQuery 对 ajax的
Angularjs实现下拉框联动的示例代码

第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model
实例详解AngularJS实现无限级联动菜单

多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的还是异步的?对于初始值的回填发生在前端还是后端?如果异步加载,是否对于后端API的返回格式有严格的定义?是否容易实现同步.异步共存?是否可以灵活的支持各类依赖关系?菜单中是否有空值选项?--一系列的问题都需要精心处理. 带着这些需求搜索了一圈,不太出乎意料,并没有能在AngularJS的生态中找到一
angularjs实现下拉列表的选中事件示例

select标签的对于大家来说很熟悉了,下面我来讲讲AngularJS中对select的属性设置,做出选择某个下拉选项后控制其他标签的隐藏: <select style="height:31px; width:100px" id="rewardMethod"name="rewardMethod" class="status_select" ng-model="state"> <optio
Angularjs自定义指令实现三级联动选择地理位置

Angularjs自定义指令实现三级联动效果,先上图代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo

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

相关推荐

随机推荐