Question

我有一个angujarJS应用程序，我有一个隐藏行的表单。如果在触发行中选择“是”，则会显示另一行，并显示“是”和“否”单选按钮。

如果在我的触发行中选择“否”，我正在尝试清除隐藏行的任何选定单选按钮，但我根本无法解决。

它可能很容易，但我只是代码盲目。

触发行

<div class="row">
     <label class="col-sm-7 col-md-6">Show hidden row?</label>
     <div class="col-sm-4">
          <input name="firstgroup" type="radio" ng-model="transferitems.firstgroup" value="Yes" required />Yes &nbsp;
          <input name="firstgroup" type="radio" ng-model="transferitems.firstgroup" value="No" required />No &nbsp;
     </div>
</div>

隐藏行

<div class="row" ng-show="transferitems.firstgroup == 'Yes'">
     <label class="col-sm-7 col-md-6">Is hidden row displayed?</label>
     <div class="col-sm-4">
          <input name="secondgroup" type="radio" ng-model="transferitems.secondgroup" value="Yes" required />Yes &nbsp;
          <input name="secondgroup" type="radio" ng-model="transferitems.secondgroup" value="No" required />No &nbsp;
     </div>
</div>

Answer 1

您可以压缩Neel的答案并将该分配直接放在'No'元素的ng-click表达式中。它更紧凑，不必在$ scope中有额外的功能。

像这样：

   <input name="firstgroup" type="radio" ng-model="transferitems.firstgroup"
         ng-click="transferitems.secondgroup=''" value="No" required />No

Answer 2

如果在触发行上添加ng-click，如

<input name="firstgroup" type="radio" ng-model="transferitems.firstgroup" value="No" ng-click="triggerChange()" required />

然后你可以定义一个范围函数，你可以在那里检查第一行触发条件并相应地清除隐藏的单选按钮。

 $scope.triggerChange = function(){
     if($scope.transferitems.firstgroup=="No"){
          $scope.transferitems.secondgroup='';
     }
  }

另一种方法是将$event传递给ng-click="triggerChange($event)"

然后你可以比较值

 if(event.target.value == "No"){
              $scope.transferitems.secondgroup='';
 }

当隐藏包含行时清除单选按钮

2 个答案: