Angular ngModel不同的视图和值

3 回答

• 0

  使用过滤器来实现这一点

  HTML

  <div ng-controller="demoController">
  
  <input type="text" value="{{val | number}}">
  </div>
  

  controller:

  var app = angular.module（'demoApp'，[]）;

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

  回复于 2024-04-26T18:27:50+08:00
• 0

  你可以使用 ngModel.$formatters ：

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

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

  See documentation

  回复于 2024-04-26T18:27:50+08:00
• 1

  回答你的问题......

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

  我假设你想要一个 Number 作为模型，但是在用户输入的输入中用逗号分隔 String . 根据这个假设，我可以用 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;
    }
  });
  

  回复于 2024-04-26T18:27:50+08:00