在离子模板中使用 ng-show

Question

我需要在 JSON 中显示与我的字符串值对应的按钮。我尝试使用 ng-show，但我看到我网站上的每个按钮。

<ion-col ng-show="channels.fields.status == 'on'" col-sm-1 class="verse">
    <button ion-button color="secondary" class="big_on"> On </button>
</ion-col>

<ion-col ng-show="channels.fields.status == 'off'" col-sm-1 class="verse">
     <button ion-button color="light" class="big_off"> Off </button> 
</ion-col>
<ion-col ng-show="channels.fields.status == 'error'" col-sm-1 class="verse"> 
     <button ion-button color="danger" class="big_error"> Error </button> 
</ion-col>

Answer 1

将 ng-show 更改为 ng-if

尝试以下代码，

  <ion-col ng-if="channels.fields.status == 'on'" col-sm-1 class="verse"><button ion-button color="secondary" class="big_on">On</button></ion-col>
  <ion-col ng-if="channels.fields.status == 'off'" col-sm-1 class="verse"> <button ion-button color="light" class="big_off">Off</button> </ion-col>
  <ion-col ng-if="channels.fields.status == 'error'" col-sm-1 class="verse"> <button ion-button color="danger" class="big_error">Error</button> </ion-col>

Answer 2

我没有使用过 ionic 2，但据我所知，"ion-col" 是使用 Angular2 的 ionic 2 的一部分。

尝试使用 *ngIf 而不是 ng-show。例如：

<ion-col *ngIf="channels.fields.status == 'on'" col-sm-1 class="verse <button ion-button color="secondary" class="big_on">On</button></ion-col>

在离子模板中使用 ng-show

Using ng-show in ionic template

html

templates

button

ionic-framework

ng-show