Angular Input格式化

今天在Angular中文群有位同学问到:如何实现对input box的格式化。如下的方式对吗?

 <input type="text" ng-model="demo.text | uppercase" />

这当然是不对的。在Angular中filter(过滤器)是为了显示数据的格式,它将$scope上的Model数据格式化View显示的数据绑定到DOM之上。它并不会负责ngModel的绑定值的格式化。

在Angular中ngModel作为Angular双向绑定中的重要组成部分,负责View控件交互数据到$scope上Model的同步。当然这里存在一些差异,View上的显示和输入都是字符串类型,而在Model上的数据则是有特定数据类型的,例如常用的Number、Date、Array、Object等。ngModel为了实现数据到Model的类型转换,在ngModelController中提供了两个管道数组$formatters和$parsers,它们分别是将Model的数据转换为View交互控件显示的值和将交互控件得到的View值转换为Model数据。它们都是一个数组对象,在ngModel启动数据转换时,会以UNIX管道式传递执行这一系列的转换。Angular允许我们手动的添加$formatters和$parsers的转换函数(unshift、push)。同时在这里也是做数据验证的最佳时机,能够转换意味应该是合法的数据。

同时,我们也可以利用Angular指令的reuqire来获取到这个ngModelController。如下方式来使用它的$parses和$formaters:

.directive(‘textTransform‘, [function() {

    return {
        require: ‘ngModel‘,
        link: function(scope, element, iAttrs, ngModelCtrl) {
            ngModelCtrl.$parsers.push(function(value) {
                ...
            });

            ngModelCtrl.$formatters.push(function(value) {
                ...
            });
        }
    };
}]);

因此,开篇所描述的输入控件的大写格式化,则可以利用ngModelController实现,在对于View文字大小的格式化,这个特殊的场景下,利用css特性text-transform会更简单。所以实现如下:

 .directive(‘textTransform‘, function() {
     var transformConfig = {
         uppercase: function(input){
             return input.toUpperCase();
         },
         capitalize: function(input){
             return input.replace(
                 /([a-zA-Z])([a-zA-Z]*)/gi,
                 function(matched, $1, $2){
                    return $1.toUpperCase() + $2;
                });
         },
         lowercase: function(input){
             return input.toLowerCase();
         }
     };
    return {
        require: ‘ngModel‘,
        link: function(scope, element, iAttrs, modelCtrl) {
            var transform = transformConfig[iAttrs.textTransform];
            if(transform){
                modelCtrl.$parsers.push(function(input) {
                    return transform(input || "");
                }); 

                element.css("text-transform", iAttrs.textTransform);
            }
        }
    };
});

则,在HTML就可以如下方式使用指令:

<input type="text" ng-model="demo.text" text-transform="capitalize" />
<input type="text" ng-model="demo.text" text-transform="uppercase" />
<input type="text" ng-model="demo.text" text-transform="lowercase" />

在这里利用了css text-transform特性,对于其它的方式,我们可以使用keydown、keyup、keypress等来实现。如inputMaskngmodel-format

时间: 2024-10-07 05:50:15

Angular Input格式化的相关文章

【转】Angular Input格式化

今天在Angular中文群有位同学问到:如何实现对input box的格式化.如下的方式对吗? <input type="text" ng-model="demo.text | uppercase" /> 这当然是不对的.在Angular中filter(过滤器)是为了显示数据的格式,它将$scope上的Model数据格式化View显示的数据绑定到DOM之上.它并不会负责ngModel的绑定值的格式化. 在Angular中ngModel作为Angular双

angular input输入框中使用filter格式化日期

最近使用了angular日期选择器,不过需要把选中的日期输出到input输入框中,如果按照默认情况,显示的是时间戳形式的时间,不符合要求,需要把格式变成特定格式,但是input上ng-model上又不能直接使用filter,因此需要一种方法把这里显示的内容格式化. 网上寻找解决方案就是写个directive,具体实例代码如下: JS angular.module('dateRange',[]).directive('dateFormat', ['$filter',function($filter

angular input使用输入框filter格式化日期

最近使用angular日期选取器.只需要把所选的输出迄今input输入框,根据默认的假设,显示是在时间的形式的时间戳.不符合规定.需要格成一个特定的公式格公式.但input上ng-model不能直接对用于filter.因此内容需要一种方法来在这里显示格式化. 网上寻找解决方式就是写个directive,详细实例代码例如以下: JS angular.module('dateRange',[]).directive('dateFormat', ['$filter',function($filter)

angular input标签只能单向传递数据的问题

angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%;margin-top: 45px " ng-init = "init()"> <ion-pane> <ion-content zooming = "true" class = "no-header"> <

angular input file 上传文件

<body > <div ng-controller="fileCtrl"> <form ng-submit="submit(obj)"> <input type="file" ng-file-model="obj.testFile" /> <input type="submit" value="submit" /> </

angular @Input() 和 @Output()

创建 Student class 就只有几个简单的属性(执行下面的属性可以快速生成) ng generate class entity/student export class Student { id: number; name: string; age: number; } 创建child component ts import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import {

前端知识点总结——Angular

前端知识点总结--Angular 一.Angular概述 基于命令行的开发方式? ①hot reload ②编译工作 ③集成了webpack打包工具 .... angular.cn 中文angular.io 正式官网angular.cn/guide/styleguide 风格指南 1.what? angular是一个Google推出的js框架,是以模块为基本单位,模块又可以包含组件.指令.过滤器.. 1.1 版本问题 angular angular2.0以后所有的版本统称为angular (当前

Python第一天课程

1.在linux下写python脚本,开头的解释器宣告的写法应该是#!/usr/bin/env python 定义变量name="liubo"  age=21   所有使用引号引起的内容都是字符串 变量的意义是标示数据,所以变量名称应该有意义 遇到复杂变量名是使用"_"分割多个单词或单词首字母大写 son_of_twins_brother_age = 2 NameOfTwinsGf = "FengJie" 不可以使用"-"连接

Web项目演化系列--验证体系

前言 数据验证主要分成2个部分,一个是前端js对用户输入的数据进行检查,另一个是后端收到请求时对请求数据进行验证.有些web项目只在前端验证用户的输入数据,但是对于请求到后端的数据却没有进行处理,这会遗留下严重的系统漏洞,又或者开发人员分别在前后端编写验证代码,当验证规则需要调整的时候,就需要一起维护,稍有不慎就会有验证不同步的问题.对于web项目而言,有一个观念是要重视的,那就是所有请求的数据都是不安全的,因为http是没有状态的,请求都是可以模拟的. 因此此次的文章是在前一篇文章的基础上增加