CODEWITHSUNDEEP
javascriptangularjs
Username
Username

Reputation: 3663

How do I select a second radio button group automatically by selecting the first group?

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?

Upvotes: 0

Views: 67

Answers (1)

Claies
Claies

Reputation: 22323

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

Upvotes: 1

Related Questions