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事实上是 ...
随机推荐
- 深入浅出ASP.NET MVC5系列之一
前言 为避免看官乏味,本系列博客限定在较新的.Net framework 4.5.1,Asp.net MVC5,IIS 7.X集成模式. 对于微软应用层的技术.我向来不舍得花太多时间学习.但又由于公司 ...
- 调用天气Api实现天气查询
上面是简单截图: 前台代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name=&qu ...
- 转 -- linux IO子系统和文件系统读写流程
我们含有分析的,是基于2.6.32及其后的内核. 我们在linux上总是要保存数据,数据要么保存在文件系统里(如ext3),要么就保存在裸设备里.我们在使用这些数据的时候都是通过文件这个抽象来访问的, ...
- Android NestedScrolling与分发机制
在Android5.0之间要实现控件的嵌套滑动,都是要自己处理View事件即分发机制. 共有三个方法: dispatchTouchEvent().onInterceptTouchEvent()和 ...
- [转]JAVA设计模式之单例模式
原文地址:http://blog.csdn.net/jason0539/article/details/23297037 概念: java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主 ...
- SVM与LR的区别以及SVM的优缺点
对于异常数据,SVM比LR更好 SVM的优缺点: 优点:1.提供非常精确的分类器 2.更少的过拟合(因为有L2正则化项0.5||w||2),对噪声数据更加鲁棒(因为损失函数的原因) 缺点:1.SVM是 ...
- java判断request请求是手机还是pc终端
/** * 判断请求是否手机端 * @param req * @return */ public static boolean isMobile(HttpServletRequest req) { U ...
- Android消息机制之ThreadLocal的工作原理
来源: http://blog.csdn.net/singwhatiwanna/article/details/48350919 很多人认为Handler的作用是更新UI,这说的的确没错,但是更新UI ...
- 【USACO 1.3】Combination Lock
/* TASK:combo LANG:C++ URL:http://train.usaco.org/usacoprob2?a=E6RZnAhV9zn&S=combo SOLVE:自己做,想的是 ...
- 【BZOJ-3638&3272&3267&3502】k-Maximum Subsequence Sum 费用流构图 + 线段树手动增广
3638: Cf172 k-Maximum Subsequence Sum Time Limit: 50 Sec Memory Limit: 256 MBSubmit: 174 Solved: 9 ...