CODEWITHSUNDEEP
angularjshtml
bpaulo
bpaulo

Reputation: 23

How to have different values for two different sets of radio buttons?

I have a list of animals and there are 2 sets of radio buttons against each animal- extinct(y or n), habitat(land or water). If user selects extinct as y for an animal then habitat radio buttons get disabled. If user selects extinct as n, then habitat radio button will be enabled and user can select either land or water as habitat.

And on change of value of the radio button I call a function, where I am getting the selected value. Now the problem is for both radio buttons I get the same value ie (y or n). How to get proper values ie y or n for extinct and land or water for habitat.

here is the code.. i have modified the names.

HTML content

<fieldset>
<legend>List of Animals</legend>
<div class="row" ng-repeat=" animal in animals">
<label class="col-md-2 text-info">{{ animal }}:</label>
<label class="col-md-1 text-info"> Extinct</label>
<div class="col-md-1">
<input id="{{animal}}extinctY" type="radio" name="{{animal}}extinct" data-     ng-model="value" value="{{animal}}|Y" ng-change="getExtinct(value1)"/>
</div>
<label class="col-md-1 text-info">Y</label>
<div class="col-md-1">
<input id="{{animal}}extinctN" type="radio" name="{{animal}}extinct" data-ng-model="value" value="{{animal}}|N" ng-change="getExtinct(value1)" required="required"/>
</div>
<label class="col-md-1 text-info">N</label>
<label class="col-md-1 text-info"> Habitat</label>
<div class="col-md-1">
<input id="{{animal}}habitatL" type="radio" name="{{animal}}habitat" ng-checked="{{animal}}checked" ng-model="value" value="{{animal}}|L" ng-disabled="{{animal}}disabled" ng-change="getHabitat(value)"/>
</div>
<label class="col-md-1 text-info">Land</label>
<div class="col-md-1">
<input id="{{animal}}habitatW" type="radio" name="{{animal}}habitat" ng-checked="{{animal}}checked" ng-model="value" value="{{animal}}|W" ng-disabled="{{animal}}disabled" ng-change="getHabitat(value)"/>
</div>
<label class="col-md-1 text-info">Water</label>
</div>
<br/>
</fieldset>

JS content

 $scope.animals= ['Zebra', 'Dinosaur', 'Whale', 'Antilon'];
 $scope.getExtinct= function getExtinct(extinct) {
     alert(extinct); // Here it displays Zebra|N
 };
 $scope.getHabitat = function getHabitat(habitat) {
     alert(habitat); // Here also it displays Zebra|N instead of Zebra|L
 };

Upvotes: 0

Views: 100

Answers (1)

Luke Sheard
Luke Sheard

Reputation: 46

The easiest way to get around this is to make the animals. I created a plunkr to demonstrate. http://plnkr.co/edit/s45WEnCbRvBL2CRmjbut?p=preview

Then you can evaluate the ng-disabled, ng-value, etc. using the keys. 

<fieldset ng-controller="AnimalCtrl">
  <legend>List of Animals</legend>
  <div class="row" ng-repeat=" animal in animals">
    <label class="col-md-2 text-info">{{ animal.name }}:</label>
    <label class="col-md-1 text-info"> Extinct</label>
    <div class="col-md-1">
      <input type="radio" name="{{animal.name}}extinct" ng-model="animal.extinct" value="true" />
      <label class="col-md-1 text-info">Y</label>
    </div>
    <div class="col-md-1">
      <input type="radio" name="{{animal.name}}extinct" ng-model="animal.extinct" value="false" required/>
      <label class="col-md-1 text-info">N</label>
    </div>

    <label class="col-md-1 text-info"> Habitat</label>
    <div class="col-md-1">
      <input type="radio" name="{{animal}}habitat" ng-model="animal.habitat" value="land" ng-disabled="animal.extinct == 'true'" />
      <label class="col-md-1 text-info">Land</label>
    </div>
    <div class="col-md-1">
      <input type="radio" name="{{animal}}habitat" ng-model="animal.habitat" value="water" ng-disabled="animal.extinct == 'true'" />
      <label class="col-md-1 text-info">Water</label>
    </div>
  </div>
</fieldset>

Upvotes: 1

Related Questions