How do I select a second radio button group automatically by selecting the first group?
Question
Here's my Plunker: 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>
When I select the "carrot" radio button, I'd like for "orange" to be selected automatically. If I select "apple," I'd like "red" to get selected;
How do I do this with AngularJS?
1 answers
solution1
1 ACCPTED 2017-09-28 00:46:21
I forked your plunker and created a new example, with a couple different ways to accomplish this. In both examples, I defined an array of fruits which can hold the different possible combinations.
$scope.fruits = [{
food: 'carrot',
color: 'orange'
}, {
food: 'apple',
color: 'red'
}];
In the first example, I statically assigned the checkboxes to the objects, like so:
<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}}
Here, all the input boxes are bound to the thing object, and their value is determined by which fruits array element they correspond to.
In the second example, I used ng-repeat to dynamically generate the inputs, which makes for a much more flexible configuration:
<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}}
When using ng-repeat , any number of radio buttons could be dynamically generated by adding objects to the fruits array.
Note, I could also have iterated through the fruits array once in a <div> and generated both the fruit and color radios, but for this example, I chose to keep the same layout.
Also of note, when using ng-repeat , a child scope is created, so an object property is required for ng-model . Binding to thing or selected directly won't work. ( $parent.thing would work, but I try to steer clear of $parent .)
Full Code:
<!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>
Forked Plunker: https://plnkr.co/edit/VY16Lb6L5xJvdt7ROY7O?p=preview
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.