AngularJS初始化Select选择框
一、引入
之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能。由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就是如何创建并初始化一个Select选择框。最近我又研究了一下AngularJS,研究出一个个人觉得比较好的初始化Select选择框的方法。
二、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myApp" ng-controller="myCtrl"> <p>选择品牌:</p> <select ng-model="selectedBrand" ng-options="x.label for x in brands">
</select> <h1>你选择的品牌是: {{selectedBrand.label}}</h1>
<h1>你选择的品牌ID是: {{selectedBrand.val}}</h1> </div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.brands = [
{label : "--请选择--", val : "-1"},
{label : "GROUP", val : 0},
{label : "SNH48", val : 1},
{label : "BEJ48", val : 2},
{label : "GNZ48", val : 3},
{label : "SHY48", val : 4},
{label : "CKG48", val : 5},
];
$scope.selectedBrand=$scope.brands[1];
});
</script> <p>该实例演示了使用 ng-repeat 指令来创建下拉列表,选中的值是一个字符串。</p>
</body>
</html>
三、效果图
四、总结一下
AngularJS是一款非常优秀的JS框架,非常好用而且有很多自己的组件。
继续学习中。。。。。
AngularJS初始化Select选择框的更多相关文章
- Notes: select选择框
HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...
- 类似 select 选择框效果及美化
网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...
- Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决
Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...
- select选择框在谷歌火狐和IE样式的不同
select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...
- Chosen:Select 选择框的华丽变身
HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...
- select选择框实现跳转
select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...
- iiview Select 选择框打勾选中的内容label和展示的不一致
Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少 :label-in-value="true";官方文档 ...
- AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...
- 修改页面中显示出需要修改的数据(包括select选择框复显示)
页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...
随机推荐
- Python Day 14 迭代器、for循环原理、枚举、生成器
阅读内容 内容回顾 带参装饰器和wraps用法 迭代器知识引入 可迭代对象 迭代器对象 for循环迭代器 枚举对象 生成器 ##内容回顾 函数的嵌套定义:在函数内部定义另一 ...
- bgfx入门练习1——切换图形API驱动模式DX与OpenGL
翻了下上次编译bgfx是去年2月份的事了,最近正好想试试DX,OpenGL双驱动,看Urho3D和Klayge光封装就头痛,人又懒,写OpenGL时也基本glfw,于是想到bgfx,不如再试试. 发现 ...
- 20154305 齐帅 PC平台逆向破解
Exp1 PC平台逆向破解 一.实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时 ...
- 卷积(转自wiki百科)
维基百科,自由的百科全书 图示两个方形脉冲波的卷积.其中函数 "g" 首先对 反射,接着平移 "t" ,成为 .那么重叠部份的面积就相当于 "t& ...
- python 引入本地 module
数据校验时,需要引入本地的一个告警python代码,引入的方式如下: import sys import os # 引入本地文件目录,或和需要引入的python文件放在同一个文件夹下 sys.path ...
- Android-普通变量与普通方法内存图
描述Worker对象: package android.java.oop11; // 描述Worker public class Worker { public String name; public ...
- WITH RECOMPILE和OPTION(RECOMPILE)区别
在考虑重编译T-SQL(或者存储过程)的时候,有两种方式可以实现强制重编译(前提是忽略导致重编译的其他因素的情况下,比如重建索引,更新统计信息等等), 一是基于WITH RECOMPILE的存储过程级 ...
- OpenStack-Ocata版+CentOS7.6 云平台环境搭建 —9.块存储服务(cinder)部署配置
块存储服务部署相关块存储服务(cinder)为实例提供块存储.存储的分配和消耗是由块存储驱动器,或者多后端配置的驱动器决定的.还有很多驱动程序可用:NAS/SAN,NFS,ISCSI,Ceph等.典型 ...
- Linux下安装mysql5.7
Linux下安装mysql5.7 首先准备好mysql5.7.17的安装包,安装包放在 /data/software 目录下 进入到 /usr/local 目录下,解压mysql安装包 命令: ...
- Restore database use sql `*.bak` file
1.第一步: 2.第二步: 3.第三布: 4.第四步: