Question

我动态创建了一个表，只有当x.deviceID==="-"的计算结果为false时，我才希望每行的最后一个表格单元格中有两个按钮。

<tr class="contentRow" id="tableRow{{x.deviceID}}" ng-repeat="x in deviceData| filter:search">
  <td>{{x.deviceID}}</td>
  <td>{{x.otherID}}</td>
  <td>{{x.aaaa}}</td>
  <td>
    //this two buttons should only be there if x.deviceID==="-"
    <button type="button" class="btn btn-xs btn-default" data-deviceid="{{x.deviceID}}">
      <span class="glyphicon glyphicon-info-sign"></span>a
    </button>

    <button type="button" class="btn btn-primary btn-xs" data-deviceid="{{x.deviceID}}">
      <span class="glyphicon glyphicon-info-sign"></span>b
    </button>
  </td>
</tr>

我的第一个方法是：

<td>{{x.deviceID}}</td>
<td>{{x.otherID}}</td>
<td>{{x.lastGpsDate}}</td>
<td>{{x.deviceID==="-" ? : '<button type"button" class="btn btn-xs btn-default" data-deviceid="{{x.deviceID}}"><span class="glyphicon glyphicon-info-sign"></span>a.....'}}

但这不会奏效。该行的最后一个单元格将始终如下{{x.deviceID==="---"? : '按钮按钮'}}。 BUTTON是一个真正的HTML按钮，而不是一个字符串！

Answer 1

使用ng-if解决问题

<button ng-if="x.deviceID == '-'" type="button" class="btn btn-xs btn-default" data-deviceid="{{x.deviceID}}">
      <span class="glyphicon glyphicon-info-sign"></span>a
</button>

Answer 2

将二者包裹在div中并使用ng-if或ng-hide来解决问题

<tr class="contentRow" id="tableRow{{x.deviceID}}" ng-repeat="x in deviceData| filter:search">
  <td>{{x.deviceID}}</td>
  <td>{{x.otherID}}</td>
  <td>{{x.aaaa}}</td>
  <td>
      <div ng-if="x.deviceID === '-'">
          //this two buttons should only be there if x.deviceID==="-"
          <button type="button" class="btn btn-xs btn-default" data-deviceid="{{x.deviceID}}">
          <span class="glyphicon glyphicon-info-sign"></span>a
          </button>

          <button type="button" class="btn btn-primary btn-xs" data-deviceid="{{x.deviceID}}">
          <span class="glyphicon glyphicon-info-sign"></span>b
          </button>
      </div>
  </td>
</tr>

您也可以使用相同条件的ng-hide。 ng-if将其从DOM＆amp;中删除 ng-hide只是将其显示设置为false，但按钮仍然在DOM中。

具有嵌套表达式的

2 个答案: