Ionic 2 Range：Value to Text

我想將我的「範圍」值轉換爲文本。Ionic 2 Range：Value to Text

例如，如果範圍達到「100」，「Pin」和「Value」{{train}}'「不應顯示」100「，則應顯示」OneHundred「。

這是我的代碼到目前爲止。

HTML：

  <ion-item> 
      <ion-range min="0" max="400" pin="true" step="100" snaps="true" [(ngModel)]="train" color="secondary"> 

      </ion-range> 
      </ion-item> 
<span>{{train}}</span>

TS（使用此設置默認範圍）：

export class MyFancyClass { 
train = 200; 
}

我希望有人能幫助我！已經感謝。

來源

2017-06-12 CupOfTea

https://stackoverflow.com/questions/14766951/convert-digits-into-words-with-javascript –

謝謝，虐待深入瞭解它。但即時通訊不使用Javascript，所以它對我來說有點困難，因爲我很新的Typescript。 – CupOfTea

typescript是javascript的超集。它只是有嚴格的類型檢查 –

我修好了。（注意：我使用的插件圖標，使這些通常應該不爲你工作，如果你沒有安裝它們在你的應用程序）：

<i primary range-left class="fa fa-bicycle"></i> 
<i primary range-right class="fa fa-train"></i>

HTML：

 <ion-list-header> 
      <ion-badge item-right>{{ trainvalue }}</ion-badge> 
     </ion-list-header> 
     <ion-item> 
      <ion-range min="0" max="400" pin="false" step="100" snaps="true" [(ngModel)]="train" color="primary" (ngModelChange)="onChangeTrain($event)"> 
      <i primary range-left class="fa fa-bicycle"></i> 
      <i primary range-right class="fa fa-train"></i> 
      </ion-range> 
     </ion-item>

TS：

export class MyFancyClass { 
       train = 200; 
       trainvalue: any; 
       textChangeTrain: any; 
       } 
    constructor(public navCtrl: NavController, public navParams: NavParams) { 
       this.textChangeTrain = ["Not Important", "Not that Important", "Neutral", "Important", "Very Important"]; 
       this.trainvalue = this.textChangeTrain[2]; 
      } 


onChangeTrain() { 
      if (this.train == 0) { this.trainvalue = this.textChangeTrain[0] } 
      if (this.train == 100) { this.trainvalue = this.textChangeTrain[1] } 
      if (this.train == 200) { this.trainvalue = this.textChangeTrain[2] } 
      if (this.train == 300) { this.trainvalue = this.textChangeTrain[3] } 
      if (this.train == 400) { this.trainvalue = this.textChangeTrain[4] } 
     }

工作原理：這將檢查是否正在使用範圍。

(ngModelChange)="onChangeTrain($event)"

這是它的功能。如果範圍的值爲「0」，那麼我們從{{trainvalue}}調用this.trainvalue，它將檢查數組中是否有正確的數字並將其替換爲文本。

onChangeTrain() { 
if (this.train == 0) { this.trainvalue = this.textChangeTrain[0] }

這是用來聲明我們的值。火車= 200;將Range設置爲默認值200，trainvalue：any;使我們能夠使用與textChangeTrain相同的值執行任何操作：any;

train = 200; 
trainvalue: any; 
textChangeTrain: any;

在這裏，我們添加的陣列和設置trainvalue [2]至極意味着我們將其設置爲200，但我們寫[2]，因爲我們從陣列調用它。

this.textChangeTrain = ["Not Important", "Not that Important", "Neutral", "Important", "Very Important"]; 
this.trainvalue = this.textChangeTrain[2]; 
}

我希望這將有助於未來的人，愉快的編碼。

來源

2017-06-30 23:56:50 CupOfTea

您可以安裝此NPM包

https://www.npmjs.com/package/number-to-text

而且它也支持多國語言

例子：

var numberToText = require('number-to-text') 
require('number-to-text/converters/en-us'); // load converter 

numberToText.convertToText('123456') 
//One Hundred Twenty Three Thousand, Four Hundred Fifty Six

上給出的鏈接有很多的例子。

來源

2017-06-12 05:24:17

這有效，但有一個誤解。我想用數組自己配置它。就像範圍值= 100，引腳應該輸出MY FANCY TEXT，如果該值達到200，則該引腳應輸出不同的文本。 – CupOfTea

Ionic 2 Range：Value to Text

回答

相關問題