本文介绍了与Angularjs无线电盒相关的示例代码，并与大家分享。具体如下：

使用angular1.6.5。

1.ng获取ng-repeat遍历的无线电值

1)范式(无ng-repeat)

可以正常显示

输入类型='radio '名称='t1' ng-model='demo '值='a'a br输入类型='radio '名称='t1' ng-model='demo '值=' b ' b H2 { { demo } }/H2

无重复

2)使用ng-repeat

它无法显示

label ng-repeat=' x in arrstr ' input type=' radio ' name=' type 1 ' ng-model=' demo ' value=' { { x } } ' { { x } }/label { { demo } } 3)解决了2的问题

如果使用ng-repeat，必须向ng-model添加$parent

div ng-app=' myApp ' ng-controller=' myCtrl ' label ng-repeat=' x in arrStr '输入类型=' radio ' name=' demo ' value=' { { x } } ' ng-model=' $ parent . demo ' { x } }/label h1 { { demo } }/h1/div

成功显示

原因：因为在ng-repeat中，$scope的作用域不是全局的，相当于局部变量，其中的变量不能全局访问。所以使用$parent使它成为一个可以全局访问的全局变量。

2.使用无线电盒的示例

从json动态生成，数据绑定

1)生成无线电盒的json数据

[{ 'display':' switch '，' data_range':[' true '，' false']}，{'display' :' working mode '，' data _ range' : ['automatic '，' manual ']]}]2]

从json数据可以看出，需要两个ng-repeat，一个用于遍历整体，一个用于遍历选项

div ng-app=' myApp ' ng-controller=' myCtrl ' div ng-repeat=' x in str ' Span { { x . display } } :/Span标签ng-repeat=' y in x.data _ range '输入类型=' radio '名称=' { { x . display } } ' ng-model=' $ parent . demo ' value=' { { y } } ' { { y } }/标签您的选择：{{demo

由于使用了固定的数据，因此这是一个简单的初始化

Varapp=angular.module ('myapp '，[]) app.controller ('myctrl '，function ($ scope，$ log，$ http){ $ scope . str=[{'display' : ' switch '，Data_range':[' true '，' false']}，{ ' display ' : '工作模式'，' data _ range' : ['automatic '，' manual']]]}) 4)结果截图

结果截图

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。