Question

我有用户名和密码字段。我想为用户提供显示/隐藏密码文本选项。我在this plunker.

中创建了代码

<ion-content class="has-header" padding>    
 <form>
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text">  </ion-input>
    </ion-item>


    <ion-item *ngIf="passTextHide">
      <ion-label floating>Password</ion-label>
      <ion-input type="password" class="showhideinput">  </ion-input>
      <span (click)="toggleShow($event)" item-right>Show</span>
    </ion-item>

    <ion-item *ngIf="passTextShow">
      <ion-label floating>Password</ion-label>
      <ion-input type="text" class="showhideinput">  </ion-input>
     <span (click)="toggleShow($event)" item-right>Hide</span>
    </ion-item>

    <ion-row>
      <ion-col>
        <button type="submit" primary block>submit</button>
      </ion-col>
    </ion-row>
  </form>
</ion-content>

点击事件正在发生，但我无法在密码字段中看到任何文字更改。

Answer 1

你可以做一些简单的事情：

HTML：

<ion-input type={{type}} class="showhideinput">{{hideorshow}} </ion-input>

  <button (click)="toggleShow($event)" item-right>{{hideorshow}}</button>

代码：

  hideorshow="SHOW"
    type="password";


    toggleShow(){
       var state=  this.type

    if(state==="password"){

      this.type='text';
      this.hideorshow="HIDE";

    }
    else{

      this.type="password"
      this.hideorshow="SHOW"
    }
   }

使用ionic2显示/隐藏文本无效

1 个答案: