Question

尝试学习AngularJS（v 1.x）并遇到一些如何最好地处理我所拥有的场景的问题。

我希望能够向用户显示一个html输入控件，允许他们输入％的利率。在数据库中，我想将值存储为十进制而没有格式化（例如0.25为25％），但在UI中我希望能够显示25％。如果用户在输入中输入一个值，我希望他们能够输入25（不含％）并将数据作为.25发送到数据库（即...没有后端验证到＆＃34;格式＆＃34;，只是验证该值是否在可接受的范围0-1）。基于我到目前为止在网上看到的所有示例，自定义指令是解决此问题的最佳方法。我构建了一个简单的指令，它正在努力完成我的大部分要求，但是如果用户手输入一个值并离开该字段，它就不会显示％。它只保留为25.我创建了一个显示此行为的简单Fiddle。

我想弄清楚的是如何使用我建立的指令来处理数据格式，无论是通过代码放入模型还是由用户手动放入。非常感谢任何帮助。

以下是完整性代码：

HTML 的

<body ng-app="app" ng-controller="ctrl">
    <input my-directive name="test" ng-model="item" placeholder="Type in a percentage as a whole #..." style="display:block;width:100%;">
    <button type="button" ng-click="item = .25">Set model to "25%"</button></br>
    <label>Value:</label>
    <span ng-bind="item"></span>
</body>

的Javascript

angular.module("app", []);

angular.module("app").controller("ctrl", function($scope){
$scope.item = '.49';

$scope.$watch('item', function(newVal, oldVal){
    if (newVal !== oldVal){
        console.log(newVal);
    }
});
});

angular.module("app").directive("myDirective", function(){
   return {
  require: 'ngModel',
  link: function (scope, element, attrs, controller) {
        controller.$parsers.push(function (data) {
            //convert data from view format to model format

            if (data) {
                return data / 100;
            }
            else {
                return 0;
            }
        });

        controller.$formatters.push(function (data) {
            //convert data from model format to view format
            if (data) {
                return (data * 100).toFixed(3).toString() + "%";
            }
            else
            {
                return "0.000%";
            }
        });
    }
};
});

Answer 1

app.js

loanProposalApp.directive('renderOnBlur', renderOnBlur);

renderOnBlur.js

var renderOnBlur = ['CONFIG', function (CONFIG) {
    var controllerFunc = ['$scope', function ($scope) {

    }];
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, elm, attrs, ctrl) {
            elm.bind('blur', function () {
                var viewValue = ctrl.$modelValue;
                for (var i in ctrl.$formatters) {
                    viewValue = ctrl.$formatters[i](viewValue);
                }
                ctrl.$viewValue = viewValue;
                ctrl.$render();
            });
        }
    };
}];

使用angular指令格式化问题

1 个答案: