Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: wender/angular-simple-input-mask
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 0.0.4
Choose a base ref
...
head repository: wender/angular-simple-input-mask
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
  • 8 commits
  • 4 files changed
  • 4 contributors

Commits on Jul 3, 2015

  1. Applying for initial load

    Wender Lima committed Jul 3, 2015
    Copy the full SHA
    53ca041 View commit details
  2. Removing console

    Wender Lima committed Jul 3, 2015
    Copy the full SHA
    2386307 View commit details

Commits on Aug 31, 2015

  1. Tornando a mudança de mascara dinâmica possível

    Mudei a posição da definição da mascara em sua função, e ai sempre que precise redefini-la basta chamar pela função
    jonyw4 committed Aug 31, 2015
    Copy the full SHA
    af50c05 View commit details

Commits on Nov 7, 2015

  1. Adding example to README

    wender committed Nov 7, 2015
    Copy the full SHA
    5c493a3 View commit details

Commits on Jan 19, 2016

  1. Copy the full SHA
    630b5e6 View commit details

Commits on Jan 21, 2016

  1. Merge pull request #5 from astesio/model-value-equal-model-view

    Now The Developer can choose if the value model is equal value view
    wender committed Jan 21, 2016
    Copy the full SHA
    4b20002 View commit details
  2. Merge pull request #4 from jonyw4/change-dynamically

    Tornando a mudança de mascara dinâmica possível
    wender committed Jan 21, 2016
    Copy the full SHA
    948553a View commit details
  3. Copy the full SHA
    bea8d68 View commit details
Showing with 219 additions and 42 deletions.
  1. +77 −0 .gitignore
  2. +2 −0 README.md
  3. +85 −0 demo/index.html
  4. +55 −42 src/angular-simple-mask.js
77 changes: 77 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@

# Created by https://www.gitignore.io/api/bower,webstorm,sublimetext

### Bower ###
bower_components
.bower-cache
.bower-registry
.bower-tmp


### WebStorm ###
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm

*.iml

## Directory-based project format:
.idea/
# if you remove the above rule, at least ignore the following:

# User-specific stuff:
# .idea/workspace.xml
# .idea/tasks.xml
# .idea/dictionaries
# .idea/shelf

# Sensitive or high-churn files:
# .idea/dataSources.ids
# .idea/dataSources.xml
# .idea/sqlDataSources.xml
# .idea/dynamic.xml
# .idea/uiDesigner.xml

# Gradle:
# .idea/gradle.xml
# .idea/libraries

# Mongo Explorer plugin:
# .idea/mongoSettings.xml

## File-based project format:
*.ipr
*.iws

## Plugin-specific files:

# IntelliJ
/out/

# mpeltonen/sbt-idea plugin
.idea_modules/

# JIRA plugin
atlassian-ide-plugin.xml

# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties


### SublimeText ###
# cache files for sublime text
*.tmlanguage.cache
*.tmPreferences.cache
*.stTheme.cache

# workspace files are user-specific
*.sublime-workspace

# project files should be checked into the repository, unless a significant
# proportion of contributors will probably not be using SublimeText
# *.sublime-project

# sftp configuration file
sftp-config.json

2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -4,6 +4,8 @@

Way simple Angular directive to apply mask to input fields also with dynamic/multiple masks to the same field, which means that you can have different masks for different lengths of numbers

[DEMO](http://wender.github.io/angular-simple-input-mask/)

Mask format uses 0
Example: 0000-0000-0000-0000

85 changes: 85 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>

<script src="../bower_components/angular/angular.js"></script>
<script src="../src/angular-simple-mask.js"></script>

<script>
angular.module('myApp', ['angularMask']);

angular.module('myApp').controller('MainCtrl', function($scope) {
$scope.field = {
zipCodeOne: null,
zipCodeTwo: null,
zipCodeThree: null
};
});
</script>
</head>
<body ng-controller="MainCtrl">

<form name="form">

<p>
<p>
<label for="idOne">$modelValue equal $viewValue with attribute declaration true</label>
</p>
<input
id="idOne"
type="text"
name="zipCodeOne"
is-model-value-equal-view-values="true"
ng-model="field.zipCodeOne"
placeholder="zip code"
required="true"
angular-mask="00000-000">

<pre>{{ form.zipCodeOne | json }}</pre>
</p>

<p>
<p>
<label for="idTwo">$modelValue different $viewValue with attribute declaration false</label>
</p>
<input
id="idTwo"
type="text"
name="zipCodeTwo"
is-model-value-equal-view-values="false"
ng-model="field.zipCodeTwo"
placeholder="zip code"
angular-mask="00000-000">

<pre>{{ form.zipCodeTwo | json }}</pre>
</p>

<p>
<p>
<label for="idThree">$modelValue different $viewValue without attribute declaration</label>
</p>

<input
id="idThree"
type="text"
name="zipCodeThree"
ng-model="field.zipCodeThree"
placeholder="zip code"
angular-mask="00000-000">

<pre>{{ form.zipCodeThree | json }}</pre>
</p>

<p>
Validation all form
<pre>
{{form | json}}
</pre>
</p>

</form>

</body>
</html>
97 changes: 55 additions & 42 deletions src/angular-simple-mask.js
Original file line number Diff line number Diff line change
@@ -1,56 +1,69 @@
'use strict';

angular.module('angularMask', [])
.directive('angularMask', function() {
return {
restrict : 'A',
require: 'ngModel',
link: function($scope, el, attrs, model) {
.directive('angularMask', function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
isModelValueEqualViewValues: '='
},
link: function ($scope, el, attrs, model) {
$scope.$watch(function(){return attrs.angularMask;}, function(value) {
if (model.$viewValue != null){
model.$viewValue = mask(String(model.$viewValue).replace(/\D/g, ''));
el.val(model.$viewValue);
}
});

model.$formatters.push(function (value) {
return value === null ? '' : mask(String(value).replace(/\D/g, ''));
});

model.$parsers.push(function (value) {
model.$viewValue = mask(value);
var modelValue = $scope.isModelValueEqualViewValues ? model.$viewValue : String(value).replace(/\D/g, '');
el.val(model.$viewValue);
return modelValue;
});

function mask(val) {
var format = attrs.angularMask,
arrFormat = format.split('|');
arrFormat = format.split('|');

if(arrFormat.length > 1){
arrFormat.sort(function(a, b){
if (arrFormat.length > 1) {
arrFormat.sort(function (a, b) {
return a.length - b.length;
});
}
model.$formatters.push(mask);
model.$parsers.push(function (value) {
model.$viewValue = mask(value);
var modelValue = parseInt(String(value).replace(/\D/g,''));
el.val(model.$viewValue);
return modelValue;
});

function mask(val) {
if(val === null){
return '';
}
var value = String(val).replace(/\D/g,'');
if(arrFormat.length > 1){
for(var a in arrFormat){
if(value.replace(/\D/g,'').length <= arrFormat[a].replace(/\D/g,'').length){
format = arrFormat[a];
break;
}
if (val === null || val == '') {
return '';
}
var value = String(val).replace(/\D/g, '');
if (arrFormat.length > 1) {
for (var a in arrFormat) {
if (value.replace(/\D/g, '').length <= arrFormat[a].replace(/\D/g, '').length) {
format = arrFormat[a];
break;
}
}
var newValue = '';
for(var nmI = 0, mI = 0; mI < format.length;){
if(format[mI].match(/\D/)){
newValue+=format[mI];
}else{
if(value[nmI] != undefined){
newValue+=value[nmI];
nmI++;
}else{
break;
}
}
mI++;
}
var newValue = '';
for (var nmI = 0, mI = 0; mI < format.length;) {
if (!value[nmI]) {
break;
}
if (format[mI].match(/\D/)) {
newValue += format[mI];
} else {
newValue += value[nmI];
nmI++;
}
return newValue;
mI++;
}
return newValue;
}
};
});
}
};
});