如何通过选择第一个组自动选择第二个单选按钮组？
如何通过选择第一个组自动选择第二个单选按钮组？
提问于 2017-09-28 00:00:18
这是我的柱塞：https://plnkr.co/edit/vuzqRCcxGsKTgRbEEhJV?p=preview
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp");
app.controller("appCTRL",function($scope,$http){
$scope.thing = {
food: '',
color: ''
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="appCTRL">
<form>
<input type="radio" value="carrot" ng-model="thing.food" name="food">Carrot
<input type="radio" value="apple" ng-model="thing.food" name="food">Apple
<br>
<input type="radio" value="orange" ng-model="thing.color" name="color">Orange
<input type="radio" value="red" ng-model="thing.color" name="color">Red
</form>
</body>
</html>当我选择“胡萝卜”单选按钮时，我希望自动选择“橙色”。如果我选择“苹果”，我希望“红色”被选中；
我如何在AngularJS中做到这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-28 00:46:21
我分叉你的柱塞，并创建了一个新的例子，有几种不同的方式来完成这一点。在这两个示例中，我都定义了一个fruits数组，它可以容纳不同的可能组合。
$scope.fruits = [{
food: 'carrot',
color: 'orange'
}, {
food: 'apple',
color: 'red'
}];在第一个示例中，我静态地将复选框分配给对象，如下所示：
<input type="radio" ng-value="fruits[0]" ng-model="thing">{{fruits[0].food}}
<input type="radio" ng-value="fruits[1]" ng-model="thing">{{fruits[1].food}}
<br>
<input type="radio" ng-value="fruits[0]" ng-model="thing">{{fruits[0].color}}
<input type="radio" ng-value="fruits[1]" ng-model="thing">{{fruits[1].color}}
<br> {{thing}}在这里，所有输入框都绑定到thing对象，它们的值取决于它们对应于哪个fruits数组元素。
在第二个示例中，我使用ng-repeat动态生成输入，这使得配置更加灵活：
<label ng-repeat="fruit in fruits">
<input type="radio" ng-value="fruit" ng-model="selected.fruit">{{fruit.food}}</label>
<br>
<label ng-repeat="fruit in fruits">
<input type="radio" ng-value="fruit" ng-model="selected.fruit">{{fruit.color}}</label>
<br> {{selected}}使用ng-repeat时，可以通过向fruits数组添加对象来动态生成任意数量的单选按钮。
注意，我也可以在一个fruits中迭代一次<div>数组，并生成fruit和color收音机，但是对于这个例子，我选择保持相同的布局。
同样值得注意的是，当使用ng-repeat时，会创建一个子作用域，因此ng-model需要一个对象属性。直接绑定到thing或selected是行不通的。($parent.thing可以工作，但我试图避开$parent。)
完整法典：
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myModule", []);
app.controller("appCTRL", function($scope, $http) {
$scope.thing = {};
$scope.selected = {
fruit: {}
};
$scope.fruits = [{
food: 'carrot',
color: 'orange'
}, {
food: 'apple',
color: 'red'
}];
});
</script>
</head>
<body ng-controller="appCTRL">
<input type="radio" ng-value="fruits[0]" ng-model="thing">{{fruits[0].food}}
<input type="radio" ng-value="fruits[1]" ng-model="thing">{{fruits[1].food}}
<br>
<input type="radio" ng-value="fruits[0]" ng-model="thing">{{fruits[0].color}}
<input type="radio" ng-value="fruits[1]" ng-model="thing">{{fruits[1].color}}
<br> {{thing}}
<h2>Using ng-repeat</h2>
<label ng-repeat="fruit in fruits">
<input type="radio" ng-value="fruit" ng-model="selected.fruit">{{fruit.food}}</label>
<br>
<label ng-repeat="fruit in fruits">
<input type="radio" ng-value="fruit" ng-model="selected.fruit">{{fruit.color}}</label>
<br> {{selected}}
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46458917
复制相关文章
相似问题
腾讯云开发者
