在角2材质滑块

处理块钱我有我的角2材料与应用的形式，除其他事项外，建模为一个最大值，最小值滑块上的价格领域，并步：在角2材质滑块

<md-input type="range" 
     [min]="minimumPrice" 
     [max]="maximumPrice" 
     [step]="priceTick" 
     class="slider">

价格被建模于美分（即没有馏分），但前端应美元显示价格，例如，12345美分的价格与一个最大的50000美分，最小的0美分，和的步骤5仙现在看起来像这样：

   12345 
     0 |---------*---------------| 50000 

       in steps of 5

但应显示在项美元：

   $123.45 
    $0.00 |---------*---------------| $500.00 

       in steps of $0.05

时显示美分，但我怎么能得到滑块的行为与价值观正确显示的形式和滑块工作在美元？

后端价格模型是被发送到前端的long值（即没有分数）一long但我愿意改变我发送到前端，以简化处理，如果需要的话。所以，一般问题是：md-input正确显示美元且行为正确的最简单方法是什么？

来源

2016-11-28 Jan Nielsen

您目前如何显示值？ – silentsod

当前值以美分显示，@silentsod - 我将更新问题以显示该问题。 –

没有被完全熟悉Angular2 Material我冒昧使用CurrencyPipe与模板变量组合滑块，如果你避开模型绑定：

<md-input type="range" name="slider" 
    [min]="minimumPrice" 
    [max]="maximumPrice" 
    [step]="priceTick" 
    #slider 
    class="slider" [placeholder]="slider.value | customCurrency"> 
    <span md-prefix>{{slider.min | customCurrency}}</span> 
    <span md-suffix>{{slider.max | customCurrency}}</span> 
</md-input>

布局可能不正确，但认为是要点它，你可以淤泥围绕这个Plunker http://plnkr.co/edit/Fj3hDJmwRD4SvzlKu6R6?p=preview

这里的CurrencyPipe的一个非常简单的自定义扩展删除设置/ 100和格式：

定制currency.pipe.ts

import {Pipe, PipeTransform} from '@angular/core'; 
import {CurrencyPipe} from '@angular/common'; 

@Pipe({ 
    name: "customCurrency" 
}) 
export class CustomCurrencyPipe implements PipeTransform { 

    constructor(private currencyPipe: CurrencyPipe) {} 

    transform(value: any): string { 
     return this.currencyPipe.transform(value/100, 'USD', true); 
    } 
}

module.ts

import {CustomCurrencyPipe} from "[location]/custom-currency.pipe"; 
import {CurrencyPipe} from "@angular/common"; 

@NgModule({<...>, declarations: [<...>, CustomCurrencyPipe], providers: [<...>, CurrencyPipe]})

来源

2016-11-28 18:35:11 silentsod

+1这是**非常接近我想要的，@silentsod - 谢谢你！因为我在很多地方都有这种类型的代码，所以我很想在'.ts'文件中隐藏各种'/ 100' - 在使用CurrencyPipe时有任何方法可以做到这一点？ –

也许你可以实现你自己的'CurrencyPipe'的扩展，并用它来代替股票。我会把它放在我的答案中。 – silentsod

太棒了 - 谢谢，@silentsod！ –

在角2材质滑块

回答

相关问题