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. yii2干货

    Sites 网站 yiifeed:Yii 最新动态都在这里 yiigist:Yii 专用的 Packages my-yii:Yii 学习资料和新闻 Docs 文档 Yii Framework 2.0 ...

  2. linux 系统下 android studio 获取SHA1

    百度地图申请key的时候需要填写包名和SHA1 包名比较好找可以在 AndroidManifest.xml 文件中找到 SHA1的获取方式有两种可以在android studio 下面选择Termin ...

  3. PHP include语句和require语句

    <?php /* PHP include语句和require语句 include和require 语句是相同的 除了错误处理方面: *require 会生成致命错误,并停止脚本 *include ...

  4. PHP中生成json信息的方法

    <?php //php中生成json信息 //json_encode(数组/对象) $color = array('red','blue','green'); //[索引数组] echo jso ...

  5. TCP/UDP,SOCKET网络通信,C++/Java实现

    趁这两天没事干,就把网络通信这一块搞一搞,C/S方面的了解一下,很重要! TCP Server/Client

  6. Oauth2.0 用Spring-security-oauth2 来实现

    前言: 要准备再次研究下 统一认证的功能了,我还是觉得实现统一认证 用Oauth2 最好了,所以,现在再次收集资料和记笔记. 正文: 一.概念理解 OAuth2, 是个授权协议, RFC文档见:htt ...

  7. java-io-FileInputStream与FileOutputStream类

    本文转载这里FileInputStream和FileOutputStream类需要注意的问题:  1.FileInputStream和FileOutputStream类分别用来创建磁盘文件的输入流和输 ...

  8. Maven2-profile多环境配置

    使用maven管理项目有一个好处是就是可以针对不同的环境使用不同的编译打包设置,方便了多环境下的打包部署,一般我们开发项目都会有至少开发环境和正式环境两个,针对这两个环境的配置信息也会有所不同,比如数 ...

  9. Office密码破解工具最好用的是哪款

    很多的用户朋友设置密码的office文档一般都含有比较重要的信息.因此,忘记密码在破解的过程中非常重视安全保密性.现在有很多款office密码破解工具,很多的用户朋友不知道用哪一款比较好,其中Adva ...

  10. js checkbox获取选中的值

    //将选择标签 var addCode = function () { var codes = []; var elements = document.getElementsByName(" ...