角度ng模型不同的视图和价值

Angular ngModel different view and value

本文关键字：视图 ng 模型 角度      更新时间：2023-09-26

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

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

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

使用过滤器来实现这一点

.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;
}]);
您可以使用

ngModel.$formatters：

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

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

请参阅文档

回答你的问题...

"我的意思是，我可以输入值为 1000000 的输入，但它在视图中显示 1,000,000 吗？"

我假设您想要一个数字作为模型，但在用户键入时输入中用逗号分隔字符串。基于这个假设，我可以用"是"来回答你的问题，你可以这样做;方法如下...

链接： 代码笔工作示例

注意

此示例的创建方式只允许在输入中输入数字。您可以在每个$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;
  }
});
相关文章：