Question

我的问题类似于此link.

我想＆＃39;％＆＃39;仅适用于视图的符号，它不应对ngmodel产生影响。如何格式化。

我有一个有百分比值的文本框，有一个基于该值的计算。所以我想显示＆＃39;％＆＃39;仅用于查看，而ngmodel仅限于值。我怎么样。

Answer 1

您可以尝试以下代码：

＆＃13;

var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope){
  $scope.testNumber = {number:30};
}]);

myApp.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return data.replace('%','');
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return data+'%';
      });
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<input my-directive type="text" data-ng-model="testNumber.number" />  <br/>
ng-model value: {{testNumber.number}}
</div>

＆＃13;

Answer 2

您可以使用自定义过滤器作为百分比值

angular.module('percentageValueFilter', [])
    .filter( 'titlecase', function() {
   return function(input) {

     if(isNaN(input)
      return input;

     else
      return input + "%";
   }
});

使用此过滤器，如下面html

中的示例所示

{{ yourVale | percentageValueFilter }}
{{ 10 | percentageValueFilter }} // 10%
{{ 'test' | percentageValueFilter }} // test

Answer 3

您可以创建一个需要ngModel的指令并添加formatter。

angular.module('formatter').directive('percentageFormatter', () => {
   return {
      require: 'ngModel',
      link: (scope, el, attrs, ngModel) => {
        ngModel.$formatters.push(value => `${value} %`);
      }
   }
});

当您需要ngModelController时，您必须将其添加到input元素。重要的是给它一个名字。

Angular ng-Model不同的视图和值

3 个答案: