AngularJS ng-repeat下使用ng-model


转载地址:http://www.weiqinxue.cn/blogs/index.php/User/articleview/ArticleID/U2A68


举例:

blue:<input type="radio" value="1" ng-model="selectValue"/>
red:<input type="radio" value="2" ng-model="selectValue"/>
yellow: <input type="radio" value="3" ng-model="selectValue"/>

以上代码实现一个单选框功能,当你选中其中的一个单选框,可以从$scope.selectValue中得到你选中的的选项的value。
同时改变$scope.selectValue的值,也可以让界面上选中相应的单选框。

假设单选框的个数是不固定的,用ng-repeat来展现。


<table>
<tr ng-repeat="row in collections">
<td>
{{row.name}}: <input type="radio" value="{{row.value}}" ng-model="selectValue"/>
</td>
</tr>
</table>

当你书写了上述代码后。你会发现点击其中的对话框,$scope.selectValue中并没有保存你选中的对应单选框的值。

这是因为处在ng-repeat之间的代码,对全局的$scope里变量的内容是不可见的,像{{row.name}}里的row,并不是全局$scope里的成员。
而是为ng-repeat创建的子scope里面的。所以要引用全局$scope里的成员,你可以使用$parent 来引用全局的$scope

<table>
<tr ng-repeat="row in collections">
<td>
{{row.name}}: <input type="radio" value="{{row.value}}" ng-model="$parent.selectValue"/>
</td>
</tr>
</table>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值