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。只有input元素中的值应为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

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

总结一下：既然你已经为你的指令提供了def save(self, *args, **kwargs): self.a.save() super(B, self).save(*args, **kwargs)函数，它将模型值（$formatters）转换为显示的形式（$modelValue），它＆＃ 39;只需提供$viewValue函数来执行相反操作并将任何用户输入转换回模型值。

Example Plunker

Answer 2

您尝试实现可能的可能性，但我会发现阅读代码确实令人困惑。我认为可以解决您的问题并保持可读性的最简单的解决方案是在5中存储整数值（$scope.percentValue），以便ng-model在键入和显示时始终处理整数<input>中的值。然后创建一个custom filter并使用它在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>

Answer 3

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

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。

Answer 4

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

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

使用角度指令

4 个答案: