显示输入作为百分比

Question

我有一个html滑块和一个输入字段，就在它旁边。输入栏显示与滑块.01 - .99相同的值。我想知道如何在输入字段中显示数字作为百分比版本，即.99显示为99％。代码很简单，但这里：

<div sc-slider 
     ng-model="vm.baseline" 
     min="0.01" 
     max="0.99" 
     step="0.01"></div> 
    <input type="text" 
     class="form-control" 
     ng-model="vm.baseline"></input> 

如果你可以链接到我的其他在线很酷的东西，但我看了，但没有找到任何东西，当然不能是唯一的人需要做到这一点。我试图像vm.baseline *100那样做，但显然没有起作用。如果可以，请帮助！

Answer 1

可以实现自定义的指令，require: ngModel，改变输入/输出，$parsers | $formattershttps://docs.angularjs.org/api/ng/type/ngModel.NgModelController

这里是一个plunker：https://plnkr.co/edit/FGuskyRwXCScPd1Kpd6a?p=preview

app.directive('toPercent', function(){ 
    return { 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModelCtrl){ 
     ngModelCtrl.$formatters.push(function(value){ 
      return value * 100 + '%'; 
     }); 

     ngModelCtrl.$parsers.push(function(value){ 
      return parseFloat(value.replace('%', '')); 
     }); 
    } 
    }; 
});