顯示輸入作爲百分比

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('%', '')); 
     }); 
    } 
    }; 
});