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 | $formatters https://docs.angularjs.org/api/ng/type/ngModel.NgModelController更改输入/输出

这是一个掠夺者：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('%', ''));
      });
    }
  };
});

将输入显示为百分比

1 个答案: