Angular ngModel 不同的視圖和值

Question

指令中的 ngModel 控制器是否可以選擇在視圖中顯示與 ngModel 值不同的內容，或者我必須為輸入編寫自定義 html 指令？
我寫了一個逗號分隔符指令。 一切都很好，但是 ngModel 值從 Number 更改為帶有, String 。
我的意思是我可以輸入值為1000000但它顯示1,000,000嗎？

更新：
在輸入框中顯示1,000,000 ，但其值為1000000 。

更新 2
我知道$formatters和$parsers 。 但問題是$formatters不會損害實際值，但它在 ngModel 直接更改時起作用，而不是通過輸入輸入元素，並且$parsers監視所有更改，但也會更改實際值。

Answer 1

使用過濾器來實現這一點

HTML

<div ng-controller="demoController">

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

控制器：

var app = angular.module('demoApp', []);

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);
});

在這種情況下，模型將保持數字，但輸入將顯示格式化的字符串。

查看文檔

Answer 3

要回答你的問題...

“我的意思是我可以輸入值為 1000000 但它顯示 1,000,000 嗎？”

我假設您想要一個Number作為模型，但是在用戶鍵入的輸入中需要一個逗號分隔的String 。 基於這個假設，我可以用YES來回答你的問題，你可以這樣做； 就是這樣...

鏈接： CodePen 工作示例

筆記

此示例的創建方式僅允許將數字輸入到輸入中。 您可以在每個 $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;
  }
});