请检查以下代码,
angular.module('myApp', []).controller('myController', ['$scope',
function($scope) {
setTimeout(function() {
$scope.policies = [{
drivers: [{
gender: 'M'
}, {
gender: 'F'
}]
}, {
drivers: [{
gender: 'M'
}, {
gender: 'F'
}]
}];
$scope.$apply();
}, 1000)
}
]);
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app='myApp'>
<div ng-controller='myController'>
<div ng-repeat='policy in policies'>
<div ng-repeat='driver in policy.drivers'>
Gender : M
<input type='radio' name='driverGender{{$index}}{{$parent.$index}}' value='M' ng-model='driver.gender' />F
<input type='radio' ng-model='driver.gender' name='driverGender{{$index}}{{$parent.$index}}' value='F' />
</div>
</div>
</div>
</div>
我试图在ng-repeat的2个级别内实现一对单选按钮。我可以检查单选按钮,值会按预期更改。但是,如果值是从控件分配的,则只有最后一对单选按钮会更新。当我将版本更改为1.2.0时,它可以正常工作。请检查下面的样本
angular.module('myApp', []).controller('myController', ['$scope',
function($scope) {
setTimeout(function() {
$scope.policies = [{
drivers: [{
gender: 'M'
}, {
gender: 'F'
}]
}, {
drivers: [{
gender: 'M'
}, {
gender: 'F'
}]
}];
$scope.$apply();
}, 1000)
}
]);
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.js"></script>
<div ng-app='myApp'>
<div ng-controller='myController'>
<div ng-repeat='policy in policies'>
<div ng-repeat='driver in policy.drivers'>
Gender : M
<input type='radio' name='driverGender{{$index}}{{$parent.$index}}' value='M' ng-model='driver.gender' />F
<input type='radio' ng-model='driver.gender' name='driverGender{{$index}}{{$parent.$index}}' value='F' />
</div>
</div>
</div>
</div>
代码或任何其他替代方法有问题吗?
最后,我找到了一个解决方案。而不是'driverGender{{$index}}{{$parent.$index}}'
我创建了返回相同函数的函数。
$scope.getRadioButtonName=function(index,parentIndex){
return 'gender'+index+parentIndex;
}
在下面检查。
// Code goes here
angular.module('myApp', []).controller('myController', ['$scope',
function($scope) {
$scope.policies = [{
drivers: [{
gender: 'M'
}, {
gender: 'F'
}]
}, {
drivers: [{
gender: 'M'
}, {
gender: 'F'
}]
}];
$scope.getRadioButtonName=function(index,parentIndex){
return 'gender'+index+parentIndex;
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app='myApp'>
<div ng-controller='myController'>
<div ng-repeat='policy in policies'>
<div ng-repeat='driver in policy.drivers'>
Gender : M
<input type='radio' ng-model='driver.gender' name='{{getRadioButtonName($index,$parent.$index)}}' value='M' />F
<input type='radio' ng-model='driver.gender' name='{{getRadioButtonName($index,$parent.$index)}}' value='F' />
</div>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句