• 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被选中。

  • 相关阅读:
    SVN使用教程总结
    SVN
    js中设置元素class的三种方法小结
    Javascript 删除tr 元素
    SQL Server执行计划的理解
    java多线程知识点汇总(四)多线程知识点脉络图
    hibernate将connection放进threadlocal里实现数据库连接池
    数据库连接池中是将connection放进threadlocal里的
    java jdbc深入理解(connection与threadlocal与数据库连接池和事务实)
    java项目怎样添加jar包依赖?
  • 原文地址:https://www.cnblogs.com/loveamyforever/p/6042343.html
Copyright © 2020-2023  润新知