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

0

У меня есть список животных, и есть 2 набора радиокнопки против каждого animal- вымершего (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
 };
Теги:

1 ответ

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>
  • 0
    Спасибо Люк .. Это решило мою проблему.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню