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事实上是 ...
随机推荐
- 71 fdisk-Linux 的磁盘分区表操作工具。
语法: fdisk [-l] 装置名称 选项与参数: -l :输出后面接的装置所有的分区内容.若仅有 fdisk -l 时, 则系统将会把整个系统内能够搜寻到的装置的分区均列出来. 实例 列出所有分区 ...
- 屠龙之路_战胜View&对DataBase猛烈进攻_ThirdDay
避开狮身人面兽攻击的屠龙战士继续前行.突然眼见一黑,战士们进到迷宫里,机智的战士用一根羊毛线绑在迷宫入口处,少年们手握着羊毛线,在迷宫里继续前行.在那样一个拐角处,遇到了恶龙的手下View&D ...
- 【日常笔记】mybatis 处理 in 语句的使用
在Mybatis的xml配置中使用集合,主要是用到了foreach动态语句. foreach的参数:foreach元素的属性主要有 item,index,collection,open,separat ...
- LVS + Keepalived + Nginx安装及配置
1.概述 上篇文章<架构设计:负载均衡层设计方案(6)——Nginx + Keepalived构建高可用的负载层>(http://blog.csdn.net/yinwenjie/artic ...
- 函数也是对象,本片介绍函数的属性、方法、Function()狗仔函数。
1.arguments.length表示实参的个数. 2.arguments.callee.length表示形参个数. function test(a,b,c,d,e,f){ alert(argume ...
- unittest测试驱动之HTMLTestRunner.py
对于自动化来说,测试报告是必须的,在敏捷化的团队中,团队中的成员需要自动化这边提供自动化的测试报告,来判断系统的整体质量以及下一步的测试策略.单元测试库生成测试输出到控制台的窗口上,但是这样的结果看起 ...
- 管道命令和xargs的区别(经典解释)
一直弄不懂,管道不就是把前一个命令的结果作为参数给下一个命令吗,那在 | 后面加不加xargs有什么区别 NewUserFF 写道: 懒蜗牛Gentoo 写道: 管道是实现"将前面的标准输出 ...
- ThinkPHP 3.2 Token表单令牌
/home/conf/config.php 中配置 'TOKEN_ON'=>true, 'TOKEN_NAME'=>'__hash__', 'TOKEN_TYPE'=>'md5', ...
- 【BZOJ-2460&3105】元素&新Nim游戏 动态维护线性基 + 贪心
3105: [cqoi2013]新Nim游戏 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 839 Solved: 490[Submit][Stat ...
- 【poj3342】 Party at Hali-Bula
http://poj.org/problem?id=3342 (题目链接) 题意 给出一棵树,要求在不存在两个节点相邻的条件下,选出尽可能多的节点,并且判断是否有多种选法. Solution 很水的树 ...