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

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.$formatterspipelines(ref)的情况.您将需要一个指令,requireS上ngModel,并把自己的代码放到这两个管道.例如:

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/