Question

我想在angularjs中更改ng-model的视图值而不影响底层模型变量。我在控制器中定义了范围变量markPercent。

$scope.markPercent = 0.43;

我试图使用ng-model从我的视图中访问相同的内容。

<input type="text" ng-model="markPercent">

此输入在视图html中显示0.43。我想要的是视图html中的43而不影响 $ scope.markPercent 的值。此外，如果用户正在更改输入字段中应该以相同方式修改范围变量的值（例如：如果用户输入65，则$ scope.markPercent应为0.65）。事实上，我不想在表中每次和每次100分乘以它（这就是我现在的表现）。我们是如何以棱角分明的方式做的？

Answer 1

ngModel.$parsers / ngModel.$formatters管道（ref）的情况就是如此。您将需要一个require ngModel的指令，并将自己的代码放入这两个管道中。 E.g：

app.directive("percent", function() {
    /** Convert a string view value to percent float from 0.0 to 1.0. */
    function parser(value) {
        // implement this
    }

    /** Convert a float from 0.0 to 1.0 to percent. */
    function formatter(value) {
        // implement this
    }

    return {
        restrict: "A",
        require: "ngModel",
        link: function(scope, elem, attrs, ngModel) {
            ngModel.$parsers.push(parser);
            ngModel.$formatters.push(formatter);
        }
    };
});

使用简单的解析器/格式化程序的工作示例：http://jsfiddle.net/748j30ha/

如何在不影响AngularJS中的原始变量的情况下操纵视图值

1 个答案: