一、引入

　　之前一个离职的同事负责的项目大量的引入了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选择框的更多相关文章

  1. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

  2. 类似 select 选择框效果及美化

    网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...

  3. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  4. select选择框在谷歌火狐和IE样式的不同

    select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...

  5. Chosen：Select 选择框的华丽变身

    HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...

  6. select选择框实现跳转

    select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...

  7. iiview Select 选择框打勾选中的内容label和展示的不一致

    Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少  :label-in-value="true";官方文档 ...

  8. AngularJS Select(选择框)

    AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...

  9. 修改页面中显示出需要修改的数据(包括select选择框复显示)

    页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...

随机推荐

  1. Linux 第四天

    1.文件搜索命令 1)locate 在文件资料库中查找文件(需要文件资料库中有,新建的文件查不到,需要手动更新,updatedb.查不到/tmp目录下的文件) 语法:locate 文件名 常用选项: ...

  2. springboot swagger 整合

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务. 文件的方法,参数和模型紧密集成到服务器端的代码,允许API来始终保持同步. 作用: 1.  ...

  3. vi分屏指令

    用vi打开,view打开vsplit不支持 命令模式下::new,新建文件并分屏, 快捷键,Ctrl+W,然后马上按n键:spilt 水平分屏,将当前屏分为两个,水平的.   Ctrl + w, s: ...

  4. Linux下强制杀死进程的方法

    常规篇: 首先,用ps查看进程,方法如下: $ ps -ef …… smx 1822 1 0 11:38 ? 00:00:49 gnome-terminal smx 1823 1822 0 11:38 ...

  5. 关于CSS布局

    是时候单独列出一篇文章记录CSS布局了. http://www.imooc.com/article/2235  [史上最全Html和CSS布局技巧]

  6. Kaldi单音素模型 训练部分

    在Kaldi中,单音素GMM的训练用的是Viterbi training,而不是Baum-Welch training.因此就不是用HMM Baum-Welch那几个公式去更新参数,也就不用计算前向概 ...

  7. 【Fiddler学习】Fiddler教程，比较经典全面（转）

    简介 Fiddler(中文名称:小提琴)是一个HTTP的调试代理,以代理服务器的方式,监听系统的Http网络数据流动,Fiddler可以也可以让你检查所有的HTTP通讯,设置断点,以及Fiddle所有 ...

  8. XStream进行xml和bean互转

    加入pom <dependency> <groupId>com.thoughtworks.xstream</groupId> <artifactId>x ...

  9. Java中的引用传递和值传递

    Java中的引用传递和值传递 关于Java的引用传递和值传递,在听了老师讲解后,还是没有弄清楚是怎么一回事,于是查了资料,所以在这里与大家分享,有不对的地方,欢迎大家留言. java中是没有指针的,j ...

  10. 使用Swagger 搭建高可读性ASP.Net WebApi文档

    一.前言 在最近一个商城项目中,使用WebApi搭建API项目.但开发过程中,前后端工程师对于沟通接口的使用,是非常耗时的.之前也有用过Swagger构建WebApi文档,但是API文档的可读性并不高 ...