0

所以我在控制器中有一个十进制值，如下所示：

// 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
    };
};

请指教！！

4

4 回答 4

1

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

总结一下：由于您已经$formatters为指令提供了一个函数，它将模型值 ( $modelValue) 转换为显示形式 ( $viewValue)，因此只需提供一个$parsers函数来执行相反的操作并将任何用户输入转换回模型值.

示例 Plunker

于 2017-06-15T14:59:12.963 回答
0

您试图实现的目标可能是可能的，但我会发现阅读代码真的很混乱。我认为可以解决您的问题并保持可读性的最简单的解决方案是将整数值 ( )5存储在. 然后创建一个自定义过滤器并使用它来输出.$scope.percentValueng-model<input>0.05<span>

编辑：添加一个具体的代码示例。在这里玩它：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>
于 2017-06-15T00:18:12.347 回答
0

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

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

输入将存储整数（如 5）

<input ng-model="percentValue" />

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

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

归功于https://stackoverflow.com/a/21727765/3687474的过滤器指令。

于 2017-06-15T01:25:30.213 回答
0

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

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

于 2017-06-15T04:59:21.993 回答