Angular ngModel不同的视图和值

Question

指令中的ngModel控制器是否有任何选项可以在视图中显示与ngModel值不同的内容，或者我必须为输入编写自定义html指令？
我写了一个逗号分隔符指令。一切都很好，但ngModel值从Number更改为String , 我的意思是我可以输入值1000000，但它在视图中显示1,000,000吗？

更新
在输入框中显示1,000,000，但其值为1000000。

更新2
我知道$formatters和$parsers。但问题是$formatters不会损害实际价值，但是当ngModel直接更改时，它不起作用，而不是输入input元素，而$parsers会监视所有更改，但也会改变实际值。

Answer 1

使用过滤器实现此目的

<强> HTML

<div ng-controller="demoController">

<input type="text" value="{{val | number}}">
</div>

<强>控制器：

var app = angular.module（＆＃39; demoApp＆＃39;，[]）;

app.controller('demoController', ['$scope', '$http', function($scope, $http, $cookies, $location){
     $scope.val = 1000000;
}]);

Answer 2

您可以使用ngModel.$formatters：

ngModel.$formatters.push(function (number) {
    return convertToCommaSeparatedString(number);
});

在这种情况下，模型将保持数字，但输入将显示格式化字符串。

See documentation

Answer 3

回答你的问题...

  

＆＃34;我的意思是我可以输入值1000000，但它在视图中显示1,000,000？＆＃34;

我假设你想要一个数字作为模型，但是当用户输入时，输入中的逗号分隔字符串。根据这个假设，我可以用 YES 回答你的问题，你可以这样做;这是怎么......

链接：CodePen Working Example

  

注意

此示例的创建方式只允许将数字输入到输入中。您可以在每个$ filter中随意更改此内容。

另外要注意的是，只使用您创建的过滤器，以便在数据进入过滤器时清理数据。角度过滤器主要用于静态值，因此当您想要在输入值时过滤它们时它们不起作用。

即。在这种情况下，如果我们没有通过删除（/ \ D / g）所有非数字来清理数据，我们将在字符串和结果中用逗号（和其他任何东西）拆分，连接和反转会崩溃。

  

<强> HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="inputValueModel" type="text" format-my-view-only />
  Model Value is Number: {{ inputValueModel || "Empty" }}
</div>

  

<强> JS

var app = angular.module("myApp", []).controller("myCtrl", function($scope){});

app.directive("formatMyViewOnly", function($filter){
// You don't have to use $filter, you can do inline work as well as
// functions inside of this directive. I use $filters for code reuse.

  return {
    require: "ngModel",
    restrict: "A",
    link: function(scope, elem, attrs, input){

      input.$parsers.push(function(value){
        value = $filter("addCommas")(value);
        input.$setViewValue(value); // Set view value.
        input.$render();
        // Then return Number to model.
        return +$filter("onlyNumbers")(value); // Unary Operator converts string to Number. Remove it if you want model to be a string as well.
      });
    } // end link.
  }; // end return.
});


app.filter('onlyNumbers', function(){
  return function(numbers){
    if(invalid(numbers)){ return ""; }
    return numbers.replace(/\D/g, "");
  };

  function invalid(number){
    return !number || notString(number) || noNumbersExists(number);
  }

  function notString(string){
    return typeof string != "string";
  }

  function noNumbersExists(number){
    return number.replace(/\D/g, "").length === 0;
  }
});

app.filter('addCommas', function(){
  return function(stringOfNums){
    if(invalid(stringOfNums)){ return ""; }
    return commaSeparated(stringOfNums.replace(/\D/g, ""));
  };

  function commaSeparated(numbers){
    if(!numbers){return "";}
    return numbers.split("").reverse().join("")
      .match(/.{1,3}/g).reverse().join(",");
  }

  function invalid(number){
    return !number || notString(number) || noNumbersExists(number);
  }

  function notString(string){
    return typeof string != "string";
  }

  function noNumbersExists(number){
    return number.replace(/\D/g, "").length === 0;
  }
});