Question

我有一份动物清单，每个动物灭绝（y或n），栖息地（土地或水）有2套单选按钮。如果用户选择灭绝作为动物的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

解决这个问题的最简单方法是制作动物。我创建了一个plunkr来演示。 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>

如何为两组不同的单选按钮设置不同的值？

1 个答案: