Question

我有以下变量：

$scope.pixelWidth = "30px";

我有一个像这样的输入框：

<input ng-model="pixelWidth" />

我希望输入框中只包含数字，但在输入时仍然会将 px 插入$scope.pixelWidth。

有没有办法实现这个目标？

Answer 1

是的，您需要创建一个指令并向ngModelController添加格式化程序和解析器。见working version on plunker

指令：

app.directive('modelSuffix', [function() {
  return {
    restrict: 'AE',
    require: '^ngModel',
    link: function(scope, element, attributes, ngModelController) {
          var suffix = attributes.modelSuffix;
          // Pipeline of functions called to read value from DOM 
          ngModelController.$parsers.push(function(value) {
            return value + suffix;
          });

          // Pipeline of functions called to display on DOM
          ngModelController.$formatters.push(function(value) {
            return value.replace(suffix, '');
          });
        }
  }
}]);

并像这样使用它：

<input ng-model="pixelWidth" model-suffix="px"/>

Answer 2

<input type="text" name="userName" ng-model="pixel.value" ng-model-options="{ getterSetter: true }" />


var _myPixel = '0';
$scope.pixel = {
    value: function(pixel) {`enter code here`
     // Note that pixelcan be undefined for two reasons:
     // 1. Because it is called as a getter and thus called with no arguments
     // 2. Because the property should actually be set to undefined. This happens e.g. if the
     //    input is invalid
     return arguments.length ? (_myPixel = pixel.split("px")[0]) : _myPixel + "px";
  }
};

我正在删除setter中的“px”并在getter中添加“px”。

我希望这对你有用！

Answer 3

你可以通过观看功能来做到这一点。

$scope.$watch("pixelWidth",function(VariableValue){

// remove "px" from your variable and assign it again

$scope.pixelWidth=newValue;
});

Answer 4

如果不在控制器中使用第二个变量，我看不到任何可以实现此目的的方法。如果您更改$scope.pixelWidth以包含＆＃39; px＆＃39;，那么这些内容最终会出现在您的输入框中。这是双向数据绑定的神奇之处，除了在这个用例中，结果对你来说可能不那么神奇。

您可能需要对输入框中的ng-change事件做出反应，以更改第二个阴影变量。

<input ng-model='pixelWidth' ng-change='addPx(pixelWidth)'>

控制器JS中的

$scope.addPx = function(pw){
  $scope.withPx = pw + 'px';
}

ng-model在键入和显示时操纵值

4 个答案: