angularjs中ng-selected使用方法
ng-selected只能应用在option标签上,就像ng-submit只能应用在form标签上一样。
ng-selected指令为select设置了指定的选中值,HTML规范不允许浏览器保存类似selected的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失。这个指令不被浏览器删除,并且提供了一个永久性的可靠的地方来存储绑定信息。
今天学习ng-selected的时候,通过copy官网上的例子来实践
click me to select radio:<input type="radio" name="name" ng-model="sel"/>
<p>{{sel}}</p>
click me to select checkbox: <input type="checkbox" ng-model="sel"/>
<select>
<option>Hello</option>
<option>World</option>
<option ng-selected="sel">greeting</option>
</select>
实践过程中发现当选中checkbox时{{sel}}值是true,则option中greeting被选中。但是当选中radio时,greeting没有被选中并且{{sel}}的值为空。
原因:type=radio的input没有值,应给type=radio的input加上value值,则可以输出{{sel}}的值,greeting也会被选中。
修改之后的代码如下:
<input type="radio" name="name" ng-model="sel" value="male"/>male
<input type="radio" name="name" ng-model="sel" value="female"/>female
<p>{{sel}}</p>
click me to select checkbox: <input type="checkbox" ng-model="sel"/>
<select>
<option>Hello</option>
<option>World</option>
<option ng-selected="sel">greeting</option>
</select>
选中male这个单选框时,{{sel}}值为male,有值则ng-selected为true,greeting被选中。
angularjs中ng-selected使用方法的更多相关文章
- AngularJS中控制器之间通信方法
在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...
- AngularJS中页面传参方法
1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
- angularJS中$apply()方法详解
这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...
- AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法
简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...
- AngularJS中监视Scope变量以及外部调用Scope方法
在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...
- 深入了解angularjs中的$digest与$apply方法,从区别聊到使用优化
壹 ❀ 引 如果有人问,在angularjs中修改模型数据为何视图会同步更新呢,我想大多数人一定会回答脏检查(Dirty Checking)相关概念.没错,在angularjs中作用域(scope) ...
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- (九)通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系
$injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...
随机推荐
- innerHeight,clientHeight,offsetHeight,scrollWidth等的区别和用法
要理解这几个属性,首先要搞明白body,documentElement的区别 1.body是DOM对象里的body子节点,即<body>标签2.documentElement是整个节点树的 ...
- 使用Git时一些问题的处理
更新日志: 2016.06.04 晚 添加 git push --force (用于删除高版本的commit) 2015.11.29 晚 添加冲突处理工具Meld的教程 添加在GitHub上Rever ...
- __getattribute__
class Foo: def __init__(self,x): self.x = x def __getattribute__(self, item): print('不管是否纯在,我都会执行') ...
- oracle 删除用户及相关表数据,释放磁盘空间
来源于:http://www.itpub.net/thread-513609-1-1.html http://bbs.csdn.net/topics/330251089 http://blog.csd ...
- 给Linux装图形化界面
在工作中遇到这种情况,安装confluence服务的时候需要调用图形化桌面,但是原来装系统的时候是最小化装的,所以这里就麻烦了 给装图形化吧 在我们安装Linux系统时,刚开始的时候可能没有安装图形界 ...
- mysql查询所有记录,并去掉重复的记录
select * from tablename group by name;如果是select * from tablename group by name,age;那么查询的是满足name和age都 ...
- ElasticSearch快照备份及恢复
工作步骤: 1:建立备份快照数据挂载点,即共享文件目录(Shared Filesystem): 2:建立快照仓储repository: 3:建立snapshot快照备份: 4:恢复snapshot快照 ...
- wordpress 缩略图功能函数 the_post_thumbnail
很多 WordPress 主题,特别是那些杂志型的主题,会给每篇日志加上一张缩略图,这种展现方式一般用在首页,可能单独出现,或者和日志摘要一起.但是目前位置没有一个标准的方法去实现日志缩略图,很多主题 ...
- 寻找数组中的第K大的元素,多种解法以及分析
遇到了一个很简单而有意思的问题,可以看出不同的算法策略对这个问题求解的优化过程.问题:寻找数组中的第K大的元素. 最简单的想法是直接进行排序,算法复杂度是O(N*logN).这么做很明显比较低效率,因 ...
- c# base64 编码解码
一. Base64的编码规则 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编 码.它将需要编码的数据拆分成字节数组.以3个字节为一组.按顺序排列24 位数据,再把这24位数 ...