AngularJS ng-repeat下使用ng-model

发布时间：2020-12-17 10:35:15 所属栏目：安全来源：网络整理

导读：举例： 123 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"/ 以上代码实现一个单选框功能，当你选中其中的一个单选框，

举例：

1
2
3

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>

除非注明，赵岩的博客文章均为原创，转载请以链接形式标明本文地址
本文地址：http://zhaoyanblog.com/archives/97.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!