Question

我有一台收音机：

<div class="row">
  <div class="col15">
    <input type="radio" id="client_yes" name="client" ng-model="entry.client" ng-required="true" value="yes"><label for="client_yes">Yes</label>
  </div>
  <div class="col15">
    <input type="radio" id="client_no" name="client" ng-model="entry.client" ng-required="true" value="no"><label for="client_no">No</label>
  </div>

</div>

当选择client_yes时，我想要使用ng-hide隐藏表单上的一些问题。

我查看了文档中的示例：

http://docs.angularjs.org/api/ng.directive:ngHide

这使用勾选框来隐藏：

ng-hide="checked"

Checked是刻度框的ng-model的名称，我只是不确定如何使用无线电，因为它们都具有相同的型号名称？

Answer 1

在问题div上使用ng-hide指令，如下所示：

ng-hide="entry.client=='yes'"

请参阅plunker：http://plnkr.co/edit/o2dXzq3lTGy4iBPxS6MT?p=preview

这是HTML代码：

  <body ng-app="app" ng-controller="Controller">
    <div class="row">
      <div class="col15">
        <input type="radio" id="client_yes" name="client" ng-model="entry.client" ng-required="true" value="yes" />
        <label for="client_yes">Yes</label>
      </div>
      <div class="col15">
        <input type="radio" id="client_no" name="client" ng-model="entry.client" ng-required="true" value="no" />
        <label for="client_no">No</label>
      </div>

      <div class="col15" ng-hide="entry.client=='yes'">
      question to hide
      </div>
      <div class="col15">
      question NOT to hide
      </div>
      <div class="col15" ng-hide="entry.client=='yes'">
      question to hide
      </div>
    </div>
  </body>

Answer 2

According to the docs，您可以使用value属性在选择时将每个单选按钮设置为不同的值：

<div class="row">
  <div class="col15">
    <input type="radio" id="client_yes" name="client" value="yes" ng-model="entry.client" ng-required="true"><label for="client_yes">Yes</label>
  </div>
  <div class="col15">
    <input type="radio" id="client_no" name="client" value="no" ng-model="entry.client" ng-required="true"><label for="client_no">No</label>
  </div>

然后你可以根据值隐藏：

ng-hide="entry.client == 'yes'"

使用ng-hide和无线电隐藏元素？

2 个答案: