当前位置: 首页 > 面试题库 >

在Angularjs中格式化输入值

阴飞星
2023-03-14
问题内容

我正在尝试编写一条指令,该指令会自动在中格式化数字,<input>但模型未格式化。使它正常工作是很好的,在加载时,输入值在控制器中显示为1,000,000和1000000,但是,只有键入时,该ngModel.$parsers函数才会触发。ngModel.$formatters发生火灾的唯一时间是指令被加载且值为0时。

我怎样才能使它在keypress上起作用(我曾尝试绑定到keypress / keyup,但它不起作用)。

这是我的代码:

angular.module('myApp.directives', []).directive('filterInput', ['$filter', function($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {

            ngModel.$parsers.push(function fromUser(text) {
                return parseInt(text.replace(",", ""));
            });

            ngModel.$formatters.push(function toUser(text) {
                console.log($filter('number')(text));
                return ($filter('number')(text || ''));
            });

        }
    };
}]);

问题答案:

这是我们使用的工作示例unshift

angular.module('myApp.directives', []).directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;


            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue)
            });


            ctrl.$parsers.unshift(function (viewValue) {
                var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
                elem.val($filter(attrs.format)(plainNumber));
                return plainNumber;
            });
        }
    };
}]);

HTML似乎:

<input type="text" ng-model="test" format="number" />

观看演示 **[Fiddle](http://jsfiddle.net/SAWsA/2776/)**

希望它的帮助



 类似资料:
  • 问题内容: 我想使用带格式的数字输入来在用户键入大数字时向用户显示千位分隔符。这是我使用的指令代码: http //jsfiddle.net/LCZfd/3/ 当我使用它时有效,但是当我要使用它时,当用户键入大数字时,它会被某些东西奇怪地清除。 有什么问题? 问题答案: 如注释中所述,除数字,小数点分隔符(通常或取决于语言环境)和或之外,什么都不支持。您仍然可以 输入 任何内容,但是浏览器将丢弃任

  • 我们可以看到格式化就是通过格式字符串得到特定格式: format!("{}", foo) -> "3735928559" format!("0x{:X}", foo) -> "0xDEADBEEF" format!("0o{:o}", foo) -> "0o33653337357" 根据使用的参数类型,同样的变量(foo)能够格式化成不同的形式:X, o 和未指定形式。 这个格式化的功能是通过 t

  • 我正在尝试使用云形成模板来创建一个云观察事件规则,该规则与粘合事件相匹配并针对要发送消息的SNS主题,我可以在云观察控制台中创建它,但不能通过云观察模板。这是我的事件规则: 问题是InputTemplate。我得到的错误是: 目标JobNotificationTopic的无效输入模板:[Source:(String)"作业在以下状态下完成:null.";第1行,第10列]。(服务:Amazon C

  • 概览 Django的格式化系统可以在模板中使用当前地区特定的格式,来展示日期、时间和数字。也可以处理表单中输入的本地化。 当它被开启时,访问相同内容的两个用户可能会看到以不同方式格式化的日期、时间和数字,这取决于它们的当前地区的格式。 格式化系统默认是禁用的。需要在你的设置文件中设置USE_L10N = True来启用它。 注意 为了方便起见,django-admin startproject创建

  • 问题内容: 如何在AngularJS中正确显示日期和时间? 下面的输出同时显示输入和输出,带有和不带有AngularJS日期过滤器: 打印: 所需的显示格式为 或 问题答案: v.Dt可能不是Date()对象。 参见http://jsfiddle.net/southerd/xG2t8/ 但在您的控制器中:

  • 问题内容: 我知道使用Marshaller时如何打开格式的可能性。但是我正在使用Apache CXF(JAX-RS)并返回类似的响应。 我还没有找到如何格式化输出的任何选项。我该怎么做? 问题答案: 首先,获取XML格式化输出的方法是在编组器上设置正确的属性(通常在使用CXF时使用JAXB,因为JAXB做得很可靠,所以可以使用)。也就是说,在某个地方您将需要执行以下操作: 问题是您不一定要格式化