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使用方法的更多相关文章

  1. AngularJS中控制器之间通信方法

    在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...

  2. AngularJS中页面传参方法

    1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...

  3. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  4. angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下   对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...

  5. AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

    简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...

  6. AngularJS中监视Scope变量以及外部调用Scope方法

    在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...

  7. 深入了解angularjs中的$digest与$apply方法,从区别聊到使用优化

     壹 ❀ 引 如果有人问,在angularjs中修改模型数据为何视图会同步更新呢,我想大多数人一定会回答脏检查(Dirty Checking)相关概念.没错,在angularjs中作用域(scope) ...

  8. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  9. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  10. (九)通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

    $injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...

随机推荐

  1. 【Python】[函数] 调用与定义

    1.数据类型转换 int(),float(),str(),bool('1')2.定义函数使用 def关键字,依次写出 函数名.括号.括号中的参数.冒号,然后在缩进体中写函数内容 例子 求绝对值的函数 ...

  2. js中奇特的for循环写法

    //正常的for循环 for(var i=0;i<10;i++){ console.log(i); } //输出:1,2,3……10 //简写 for(var i=10;i--;){ conso ...

  3. Android四大组件之Activity详解——创建和启动Activity

    前面我们已经对Activity有过简单的介绍: Android开发——初始Activity Android开发——响应用户事件 Android开发——Activity生命周期 先来看一下最终结果 项目 ...

  4. github page 和 hexo 搭建在线博客

    目录: 安装node.js与git 常用git命令 安装hexo 配置hexo hexo发布到github 1.安装node.js和git工具 https://nodejs.org/en/ 直接下载安 ...

  5. mysql中IFIND_IN_SET和like的区别

    在数据库中新建一张测试表t_user,包含三个字段'id','name','grilfriend',字段很容易看出,这是记录一个人的女朋友的表,注意这里的‘firlfriend’字段可以是多个人名,之 ...

  6. [转]响应式WEB设计学习(3)—如何改善移动设备网页的性能

    原文地址:http://www.jb51.net/web/70362.html 前言 移动设备由于受到带宽.处理器运算速度的限制,因而对网页的性能有更高的要求.究竟是网页中的何种元素拉低了网页在移动设 ...

  7. Java-URL类详解

    类 URL 代表一个统一资源定位符,它是指向互联网“资源”的指针.资源可以是简单的文件或目录,也可以是对更为复杂的对象的引用,例如对数据库或搜索引擎的查询. URL(String spec) 根据 S ...

  8. Xmanager注册吗

    xmanager4.0注册吗 --

  9. JS 初学正则表达式

    正则表达式 匹配中文,英文字母和数字及_的写法!同时控制长度 匹配中文:[\u4e00-\u9fa5] 英文字母:[a-zA-Z] 数字:[0-9] 匹配中文,英文字母和数字及_: ^[\u4e00- ...

  10. bzoj4349: 最小树形图&&bzoj2260: 商店购物

    双倍经验大法吼 昨天发现不会最小属性图&朱刘算法啊 吓得我赶紧补了一发 朱刘算法模板题 #include <iostream> #include <cstdio> #i ...