Giter VIP home page Giter VIP logo

green.inputmask4angular's Introduction

green.inputmask4angular

build status: Build Status

This project is a angular adapter for jquery.inputmask(>=2.3.61).

Download this plugin.

Usage

  1. Add the js to your HTML code.
<script src="scripts/jquery.inputmask.bundle.min.js"></script>
<script src="release/green.inputmask4angular.js"></script>
  1. Add dependency to your app modules
var myApp = angular.module("myApp", ["green.inputmask4angular"]);
  1. Put directive input-mask into your input
<input type="text" ng-model="test" input-mask="'mask'" mask-option="testoption"/>

Demo

Please see the app project:

		<div>
	        <h3>mask</h3>
	        <p>Mask: 99-9999999</p>
	        <input type="text" ng-model="test" input-mask="'mask'" mask-option="testoption"/>
	        <pre>{{ test | json }}</pre>
	    </div>

	    <div>
	        <h3>y-m-d</h3>
	        <p>Date: yyyy-MM-dd</p>
	        <input type="text" ng-model="test1" input-mask="'y-m-d'" format-option="dateFormatOption"/>
	        <pre>{{ test1 | json }}</pre>
	    </div>


	    <div>
	        <h3>Regex</h3>
	        <p>Email: "[a-zA-Z0-9._%-]+@[a-zA-Z0-9-]+\\.[a-zA-Z]{2,4}"</p>
	        <input type="text" ng-model="test3" input-mask="'Regex'"
	         mask-option="regexOption"/>
	        <pre>{{ test3 | json }}</pre>
	    </div>

	    <div>
	        <h3>Function</h3>
	        <p>"[1-]AAA-999" or  "[1-]999-AAA"</p>
	        <input type="text" ng-model="test4" input-mask="functionOption"/>
	        <pre>{{ test4 | json }}</pre>
	    </div>

Controller

	    'use strict';

		angular.module('green.inputmaskApp')
		    .controller('MainCtrl', ["$scope", function ($scope) {

		        $scope.testoption = {
		            "mask": "99-9999999",
		            "oncomplete": function () {
		                console.log();
		                console.log(arguments,"oncomplete!this log form controler");
		            },
		            "onKeyValidation": function () {
		                console.log("onKeyValidation event happend! this log form controler");
		            }
		        }

		        //default value
		        $scope.test1 = new Date();

		        $scope.dateFormatOption = {
		            parser: function (viewValue) {
		                return viewValue ? new Date(viewValue) : undefined;
		            },
		            formatter: function (modelValue) {
		                if (!modelValue) {
		                    return "";
		                }
		                var date = new Date(modelValue);
		                return (date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate()).replace(/\b(\d)\b/g, "0$1");
		            },
		            isEmpty: function (modelValue) {
		                return !modelValue;
		            }
		        };


		        $scope.mask = { regex: ["999.999", "aa-aa-aa"]};


		        $scope.regexOption = {
		            regex: "[a-zA-Z0-9._%-]+@[a-zA-Z0-9-]+\\.[a-zA-Z]{2,4}"
		        };

		        $scope.functionOption = {
		         mask: function () { 
		            return ["[1-]AAA-999", "[1-]999-AAA"]; 
		        }};


		    }]);

green.inputmask4angular's People

Contributors

ariesjia avatar greengerong avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.