AngularJS入れ子式のif-then-else構築

Question

動的にテーブルを作成し、x.deviceID==="-"がfalseと評価された場合にのみ、各行の最後の表のセルに2つのボタンを追加します。

<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==="---"? : 'ボタンボタン'}}。ボタンは文字列ではなく、実際の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-皮を使用することができ、問題

<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-ifまたはng-hideを使用よく ng-if DOMから削除します& ng-hideは表示をfalseに設定するだけですが、ボタンはまだDOM内にあります。