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事实上是 ...
随机推荐
- Android ListView 详解
我做Android已经有一段时间了,想想之前在学习Android基础知识的时候看到了许许多多博主的博文 和许多的论坛.网站.那时候就非常感谢那些博主们能吧自己的知识分享在互联网上,那时候我就想 如果我 ...
- PHP与MySQL
这周学习了PHP与MySQL的搭接下面来给大家分享一下: 1.账号注册,论坛发帖... 思路:通过form表单提交到PHP页面,PHP页面往MySQL中插入数据: 2.账号登陆 思路:form提交数据 ...
- Retrofit2 + OkHttp3设置Http请求头(Headers)方法汇总
在构建网络层时会遇到一个问题就是要手动配置Http请求的Headers,写入缓存Cookie,自定义的User-Agent等参数,但是对于有几十个接口的网络层,我才不想用注解配置Headers,目前网 ...
- [转]Java_List元素的遍历和删除
原文地址:http://blog.csdn.net/insistgogo/article/details/19619645 1.创建一个ArrayList List<Integer> li ...
- iOS不得姐项目--图片帖子模块,大图默认显示最顶部分的处理
一.刚开始的处理,设置Mode属性(self.pictureImageView.contentMode = UIViewContentModeScaleAspectFill;) 和 Clip Subv ...
- 【CodeVS 3289】【NOIP 2013】花匠
http://codevs.cn/problem/3289/ dp转移,树状数组维护前缀max和后缀max进行优化,$O(nlogn)$. #include<cstdio> #includ ...
- java中的字符,字符串,数字之间的转换
string 和int之间的转换 string转换成int :Integer.valueOf("12") int转换成string : String.valueOf(12) ch ...
- ansible解密
ansible是个什么东西呢?官方的title是“Ansible is Simple IT Automation”——简单的自动化IT工具.这个工具的目标有这么几项:让我们自动化部署APP:自动化管理 ...
- 区间DP lightoj 1031
在此游戏中任意时刻的状态都是原始序列的一段子序列故: 定义d(i, j) : 表示原来序列的第i ~ j个元素组成的子序列,在双方都采取最优策略的情况下,先手得分的最大值. 状态转移时,需要枚举从左边 ...
- 使用maven镜像
maven 的安装目录下的 conf 文件夹下有个 settings.xml 文件,编辑该文件 在<mirrors>中插入: <mirror> <id>repo2& ...