[ionic] How to set Value Input field

Posted in :

設定變數值的範例1:

You can do it like that:

page.html

<ion-input id="amount" type="number" [(ngModel)]="value"></ion-input>
<button (click)="setInput()">Set Value</button>

page.ts

export class Page {
  value: number = 0; // Default is 0

  constructor() {}

  setInput() {
    this.value = 42;
  }
}

By using [(ngModel)]="value" you bind the value variable to that input field. That way it is always updated. If you change it in the UI, it is immediately updated “in the code”. And when you update it in your code, it automatically updates in the UI.

You should probably read an Angular 2 tutorial before you continue working on your app. Angular provides many tools to make that sort of thing a lot easier.


範例 2:

變數要先定義好在 .ts  檔案裡,不然會跑出 Error: Property does not exist on type

變數定義的範例:public accordition: any;

 

 

 code:

<ion-label>{{charactersRemaining}}</ion-label>
<form [formGroup]="viewForm" (ngSubmit)="submitView()">
    <ion-textarea type="text" placeholder="Enter your view here." [(ngModel)]="view.text" formControlName="viewTextArea" rows="6" (ngModelChange)="viewTextChange()"></ion-textarea>
    <button ion-button type="submit" block>Send</button>
</form>

 

  public viewTextChange() {
    var left = this.viewMaxLength-this.view.text.length;

    if (left < 0) {
      this.view.text = '' + this.oldViewText;
      left = this.viewMaxLength-this.view.text.length;
    }

    this.charactersRemaining = (this.viewMaxLength-this.view.text.length) + ' characters remaining.';
    this.oldViewText = this.view.text;

    /* this.view.text = 'frank'; */
  }

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *