angular 更改显示与绑定数据格式转换

最新推荐文章于 2024-06-18 23:57:00 发布

原创最新推荐文章于 2024-06-18 23:57:00 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #formatter #parserer

本文介绍了一个 Angular 自定义指令 'numberConverter' 的实现方法，该指令能够将输入框内的字符串转换为数字，并且在传回 model 时再转换回字符串格式。此指令通过使用 ngModel.$formatters 和 ngModel.$parsers 来实现输入与显示的双向转换。

http://www.cnblogs.com/whitewolf/p/angular-input-box-format.html

    app.directive('numberConverter', function () {
        return {
            priority: 1,
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attr, ngModel) {
                function toModel(value) {
                    return "" + value; // convert to string
                }

                function toView(value) {
                    return parseInt(value); // convert to number
                }
                //显示到view 进行的操作
                ngModel.$formatters.push(toView);
                //传入到model 进行的操作
                ngModel.$parsers.push(toModel);
            }
        };
    });