Question

我有一个场景，我无法将单选按钮与我的模型绑定。在我的代码中，单选按钮是在ng-repeat中动态创建的，这里面是ng-if.Here是我的代码

 <div ng-if="Type.Value == 'Gadgets'">
    <div class="form-group radioChkBtn">
        <label class="col-sm-3 control-label">Device Type</label>
        <div class="col-sm-7">
            <div class="radio" ng-repeat="type in Types">
                <input type="radio" ng-model="DeviceType" ng-value="{{type.Value}}"  id="radioDeviceType{{$index}}" name="devicetype"><label for="radioDeviceType{{$index}}"> {{type.Value}}</label>
            </div>

        </div>
    </div>

DeviceType的值总是未定义的。即使我为它指定了一些值，也没有选择单选按钮。如果创建了一个范围，那么是ng-repeat。可能是导致问题的范围的嵌套。任何帮助都将非常感激。

Answer 1

相反，请尝试在无线电选择上设置模型。

在你的控制器中有这个：

$scope.onRadioChange = function(newValue) {
    $scope.DeviceType.value = newValue;
};

并使您的HTML与此类似：

<div class="radio" ng-repeat="type in Types">
    <input type="radio" ng-model="DeviceType.value" ng-change="onRadioChange(type.Value)" ng-value="type.Value" id="{{type.Id}}" name="myRadios"><label for="{{type.Id}}"> {{type.Value}}</label>
</div>

因此，为了将其分解，我们现在在通过onRadioChange()单击单选按钮时触发范围函数ng-change。我们将type.value传递给它，并在函数内部使DeviceType.value的模型等于传递给它的值。

在下面的示例中，一旦单击单选按钮，您就会看到我在页面上输出DeviceType.value，并且它与所选的单选按钮具有相同的值。我使用DeviceType.value代替DeviceType来解决Angular问题。

WORKING EXAMPLE

Answer 2

＆＃13;

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {	
	
	$scope.devices = [{
		nameD: "Device 1"
		}, {
		nameD: "Device 2"
		}, {
		nameD: "Device 3"
		}, {
		nameD: "Device 4"
	}];
	
});

＆＃13;

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<ul>
    <li ng-repeat="device in devices">  
	<label>{{device.nameD}}	
        <input type="radio" ng-model="$parent.deviceType" value="{{device.nameD}}" />       
	</label>
    </li>
</ul>
<button>Submit</button>
</form>
{{deviceType}}
 </div>
</body>
</html>

＆＃13;

Angularjs无法在嵌套范围内将单选按钮与模型绑定

2 个答案: