Как иметь разные значения для двух разных наборов переключателей?

Question

У меня есть список животных, и есть 2 набора радиокнопки против каждого вымирающего животного (y или n), среды обитания (земля или вода). Если пользователь выбирает вымершие как y для животного, то переключатели среды обитания становятся недоступными. Если пользователь выбирает вымершие как n, то переключатель среды обитания будет включен, и пользователь может выбрать землю или воду в качестве среды обитания.

И при изменении значения переключателя я вызываю функцию, где я получаю выбранное значение. Теперь проблема заключается в том, что для обоих переключателей я получаю то же значение, то есть (y или n). Как получить правильные значения, т.е. y или n для вымерших и земли или воды для среды обитания.

вот код .. я изменил имена.

содержание HTML

содержание

<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

$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 
}; 

Answer 1

Самый простой способ обойти это сделать животных. Я создал демонстрацию для демонстрации. http://plnkr.co/edit/s45WEnCbRvBL2CRmjbut?p=preview

Затем вы можете оценить ng-disabled, ng-value и т. Д. С помощью клавиш.

<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>