本文旨在分享关于Angularjs单选框的示例代码，特别是涉及到使用ng-repeat时如何获取选中的值。长沙网络推广认为这是一个很好的资源，因此决定分享给大家，希望能为大家提供参考。

在使用angular1.6.5版本时，我们经常会遇到需要使用单选框的情况。对于不使用ng-repeat的普通单选框，我们可以轻松地使用ng-model指令来绑定数据，并显示选中的值。

当我们在ng-repeat中使用单选框时，事情就变得有些复杂了。如果我们尝试使用ng-model来绑定数据，可能会发现选中的值无法正常显示。这是因为ng-repeat为每个迭代项创建了一个新的作用域，导致我们无法直接访问到选中的值。

为了解决这个问题，我们可以使用一种特殊的方法：在ng-model中加入$parent。这样做可以让我们在ng-repeat中访问到父级作用域中的变量，从而成功获取并显示选中的值。

以下是具体的代码示例：

不使用ng-repeat的单选框代码示例：

```html

a

b

{{demo}}

```

使用ng-repeat的单选框代码示例：

```html

```

在这个例子中，我们通过使用$parent前缀来访问父级作用域中的demo变量，从而成功获取并显示了选中的值。这样，即使在ng-repeat中使用单选框，我们也能轻松地获取和显示选中的值。这个技巧对于解决在ng-repeat中使用单选框时遇到的问题非常有用。使用Angular的单选框：动态生成与数据绑定实例

一、从JSON生成单选框的数据

假设我们有以下的JSON数据：

```json

[

{

"display": "开关",

"data_range": ["true", "false"]

},

{

"display": "工作模式",

"data_range": ["自动", "手动"]

}

]

```

这些数据描述了两组单选框的选项。其中，"display"字段表示单选框的标签，"data_range"字段则包含了可选的值。

二、HTML代码实现

我们可以使用Angular的ng-repeat指令来动态生成这些单选框。代码如下：

```html

```

这里，外层ng-repeat遍历所有的选项，内层ng-repeat则遍历每个选项的值。每个单选框的name属性由对应的"display"字段决定，而ng-model则用来绑定当前选中的值。

三、JavaScript代码实现

对应的JavaScript代码很简单，只需要初始化我们的数据即可：

```javascript

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

$scope.str = [

{

"display": "开关",

"data_range": ["true", "false"]

},

{

"display": "工作模式",

"data_range": ["自动", "手动"]

}

];

$scope.demo = ''; // 默认选中的值，可以根据实际需求进行设定。这里为空字符串表示默认不选中任何选项。

}); 需要注意的是，这里的ng-model绑定的变量demo必须在控制器中被定义和初始化。如果没有定义demo变量，那么用户的选择将无法被保存下来。 四、结果展示 由于这里无法直接展示结果截图，你可以将上述代码在Angular环境下运行，查看生成的单选框效果。 五、总结 本文通过简单的例子展示了如何使用Angular的动态生成和数据绑定功能来创建单选框。通过这种方式，我们可以轻松地根据JSON数据动态生成表单，提高了开发效率和用户体验。希望这个例子能对大家的学习有所帮助，也希望大家多多支持我们的分享。以上就是本文的全部内容，感谢大家的阅读和支持！