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

回答

相关问题