Angularjs 将相同的函数绑定到不同的按钮

我为password view/notview创建了一个眼睛图标按钮

但有一个页面，我需要的是“恢复密码”页面

在这个页面中有3个输入，它们都带有相同的按钮

当我单击其中一个时，它们都被切换

如何将每一个单独绑定到同一个函数

守则如下：

HTML

---

非常感谢。

您可以轻松地在函数中使用3个布尔值

isSenhaView : boolean = true;
isSenhaView2 : boolean = true;
isSenhaView3 : boolean = true;
  toggleSenhaView():void{
    this.isSenhaView = !this.isSenhaView;
    this.isSenhaView2 = !this.isSenhaView;
    this.isSenhaView3 = !this.isSenhaView;
  }

---

你可以很容易地在你的函数中使用3个布尔值

isSenhaView : boolean = true;
isSenhaView2 : boolean = true;
isSenhaView3 : boolean = true;
  toggleSenhaView():void{
    this.isSenhaView = !this.isSenhaView;
    this.isSenhaView2 = !this.isSenhaView;
    this.isSenhaView3 = !this.isSenhaView;
  }

代码示例：

<ion-item>
   <ion-input placeholder="Senha antiga" [type]="isSenhaView1 ? 'password' : 
       'text'">
   </ion-input>
   <button ion-button icon-only item-right clear color="light" 
      (click)="toggleSenhaView(1)">
      <ion-icon [name]="isSenhaView ? 'eye' : 'eye-off'"></ion-icon>
  </button>
</ion-item>

<ion-item>
    <ion-input placeholder="Senha antiga" [type]="isSenhaView2 ? 'password' 
      :  'text'">
   </ion-input>
   <button ion-button icon-only item-right clear color="light" 
      (click)="toggleSenhaView(2)">
  <ion-icon [name]="isSenhaView ? 'eye' : 'eye-off'"></ion-icon>
 </button>
</ion-item>

<ion-item>
   <ion-input placeholder="Senha antiga" [type]="isSenhaView3 ? 'password' : 
      'text'">
</ion-input>
   <button ion-button icon-only item-right clear color="light" 
     (click)="toggleSenhaView(3)">
   <ion-icon [name]="isSenhaView ? 'eye' : 'eye-off'"></ion-icon>
   </button>
</ion-item>



isSenhaView1 : boolean = true;
isSenhaView2 : boolean = true;
isSenhaView3 : boolean = true;

toggleSenhaView(x):void{
   switch (x) 
   {
    case 1: 
      this.isSenhaView1 = !this.isSenhaView1;
      break; 
    case 2: 
      this.isSenhaView2 = !this.isSenhaView2;
      break; 
    case 3: 
      this.isSenhaView3 = !this.isSenhaView3;
      break;                 
    }

isSenhaView1:boolean=true；
isSenhaView2:boolean=true；
isSenhaView3:boolean=true；
toggleSenhaView（x）：无效{
开关（x）
{
案例1：
this.isSenhaView1=！this.isSenhaView1；
打破
案例2：
this.isSenhaView2=！this.isSenhaView2；
打破
案例3：
this.isSenhaView3=！this.isSenhaView3；
打破
}

代码示例：

<ion-item>
   <ion-input placeholder="Senha antiga" [type]="isSenhaView1 ? 'password' : 
       'text'">
   </ion-input>
   <button ion-button icon-only item-right clear color="light" 
      (click)="toggleSenhaView(1)">
      <ion-icon [name]="isSenhaView ? 'eye' : 'eye-off'"></ion-icon>
  </button>
</ion-item>

<ion-item>
    <ion-input placeholder="Senha antiga" [type]="isSenhaView2 ? 'password' 
      :  'text'">
   </ion-input>
   <button ion-button icon-only item-right clear color="light" 
      (click)="toggleSenhaView(2)">
  <ion-icon [name]="isSenhaView ? 'eye' : 'eye-off'"></ion-icon>
 </button>
</ion-item>

<ion-item>
   <ion-input placeholder="Senha antiga" [type]="isSenhaView3 ? 'password' : 
      'text'">
</ion-input>
   <button ion-button icon-only item-right clear color="light" 
     (click)="toggleSenhaView(3)">
   <ion-icon [name]="isSenhaView ? 'eye' : 'eye-off'"></ion-icon>
   </button>
</ion-item>



isSenhaView1 : boolean = true;
isSenhaView2 : boolean = true;
isSenhaView3 : boolean = true;

toggleSenhaView(x):void{
   switch (x) 
   {
    case 1: 
      this.isSenhaView1 = !this.isSenhaView1;
      break; 
    case 2: 
      this.isSenhaView2 = !this.isSenhaView2;
      break; 
    case 3: 
      this.isSenhaView3 = !this.isSenhaView3;
      break;                 
    }

isSenhaView1:boolean=true；
isSenhaView2:boolean=true；
isSenhaView3:boolean=true；
toggleSenhaView（x）：无效{
开关（x）
{
案例1：
this.isSenhaView1=！this.isSenhaView1；
打破
案例2：
this.isSenhaView2=！this.isSenhaView2；
打破
案例3：
this.isSenhaView3=！this.isSenhaView3；
打破
}

创建一个组件会更好一些，我确实想过，但我真的不知道如何构建这个组件…应该如何构建？创建一个组件会更好一些，我确实想过，但我真的不知道如何构建这个组件…应该如何构建？这是一个丑陋的解决方案，你必须为每个字段添加一个布尔值，我同意h@Lakshay：最好创建一个组件这是一个丑陋的解决方案，你必须在每个字段中添加一个布尔值，我同意@Lakshay：最好创建一个组件是的，这是可行的，但我在考虑更动态的东西。是的，这是可行的，但我在考虑更动态的东西。