使用 angular 指令仅更新 'view' 值

Question

所以我在控制器中有一个这样的十进制值：

// Controller
var MyController = function($scope) {
    ...
    $scope.percentValue = 0.05; // can be stored
    ...
};

<!-- View -->
<span>{{percentValue}}</span>
<input ng-model="percentValue" />

使用上面的代码，input 元素中的值为 0.05 - 但是，我想允许用户输入一个整数值，例如 5.

所以如果 $scope.percentValue 是 0.05，我想在输入元素中将其显示为 5。如果用户输入 5，则 $scope.percentValue 应该是 0.05.

然而，这里棘手的是我只想更新视图值 - 这意味着 span 元素仍应显示 0.05。只有输入元素中的值应该是 5.

我正在尝试使用 ngModel 来实现这一目标，但我仍在努力。

这是我现在拥有的：

var MyDirective = function() {
    function link(scope, element, attrs, ngModel) {
        ngModel.$render = function() {
            element.val(ngModel.$viewValue || '');
        };

        ngModel.$formatters.push(function (value) {
            return value * 100;
        });

        element.on('change blur', function() {
            ngModel.$setViewValue(element.val());
        }); 
    }

    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {},
        link: link
    };
};

请指教！！

Answer 1

您想要实现的目标可能是可能的，但我会发现阅读代码真的很混乱。我认为可以解决您的问题并保持可读性的最简单解决方案是在 $scope.percentValue 中存储一个整数值 (5)，以便 ng-model 在键入和显示时始终处理一个整数<input> 中的值。然后创建一个 custom filter 并使用它在 <span>.

中将值输出为 0.05

编辑：添加具体代码示例。在这里玩：https://plnkr.co/edit/C1cX2L9B2GM2yax1rw7Z?p=preview

JS:

var MyController = function ($scope) {
  $scope.percentValue = 5;
};

function formatPercent (input) {
  return input / 100;
}

var myApp = angular.module('MyApp', []);
myApp.filter('percent', function () { return formatPercent });
myApp.controller('MyController', ['$scope', MyController]);

HTML:

<body ng-controller="MyController">
  <span>{{ percentValue | percent }}</span>
  <input ng-model="percentValue">
</body>

Answer 2

我会为百分比创建一个过滤器：

angular.module('myModule')
.filter('percentage', ['$filter', function($filter) {
    return function(input, decimals) {
        return $filter('number')(input*100, decimals)+'%';
    };
}]);

输入将存储整数（例如5）

<input ng-model="percentValue" />

但我会在跨度部分添加一个过滤器：

<span>{{percentValue | percentage:2}}</span>

过滤器指令归功于。

Answer 3

除了创建过滤器，您还可以在模板上计算

<span>{{percentValue * 100}}</span>

Answer 4

包括我的评论作为答案，因为它似乎有帮助。 :-)

总而言之：由于您已经为指令提供了一个 $formatters 函数，它将模型值 ($modelValue) 转换为显示形式 ($viewValue)，它只是提供一个 $parsers 函数来进行反向操作并将任何用户输入转换回模型值的问题。

Example Plunker

使用 angular 指令仅更新 'view' 值

Updating only the 'view' value using angular directive

javascript

angularjs

angularjs-directive

angularjs-model