angularjs中ng-selected使用方法

最新推荐文章于 2024-09-07 09:07:45 发布

weixin_30325971

最新推荐文章于 2024-09-07 09:07:45 发布

阅读量196

点赞数

原文链接：http://www.cnblogs.com/loveamyforever/p/6042343.html

版权

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

转载于:https://www.cnblogs.com/loveamyforever/p/6042343.html