Angular ng-Model 不同的视图和值答案

【问题标题】：Angular ng-Model different view and valueAngular ng-Model 不同的视图和值
【发布时间】：2017-03-13 09:58:01
【问题描述】：

我的问题与link.类似

我只想要 '%' 符号用于查看，它不应该影响 ngmodel。我该如何格式化。

我有一个包含百分比值的文本框，有一个基于该值的计算。所以我只想显示“%”用于查看，而 ngmodel 只包含值。我该怎么办。

【问题讨论】：

您可以编写自己的指令，其中 $viewValue 将根据用户输入进行更改，并且 $modelValue 将与用户所拥有的相同 input

标签： javascript angularjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你可以试试下面的代码：

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

<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>

【讨论】：

百分号是可编辑的，所以可以去掉这个有什么替代品

【解决方案3】：

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

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

当您需要 ngModelController 时，您必须将其添加到输入元素。给它起个名字也很重要。

【讨论】：

哪个错误？当需要表单或 ngModel 时，您必须将其添加到 html 元素。
我不懂可以在聊天中给我留言如果你需要帮助，也许你的环境不了解箭头函数？
百分号是可编辑的，所以可以去掉这个有什么替代品
是的，$formatter 采用一个或多个函数，并按照它们插入的顺序执行。每个函数获取视图上的值并返回格式化的值。可以在同一个函数中为每个案例添加多个返回语句
每次值改变时是否会调用