angular-input-mask-i18n
Version:
Personalized input masks for AngularJS
154 lines (137 loc) • 7.71 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Mask Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.5/angular-locale_pt-br.js"></script>
<script src="../releases/masks.js"></script>
<script>
angular.module('demo', ['ui.utils.masks']);
function ctrl($scope) {
$scope.numberWith2Decimals = -1234.178;
$scope.percentageWithDefaultDecimals = 0.7654;
$scope.initializedCpf = '35244457640';
$scope.initializedCnpj = '13883875000120';
$scope.initializedCpfCnpj1 = '56338332958';
$scope.initializedCpfCnpj2 = '23212161000144';
$scope.defaultMoney = 15312;
$scope.moneyStartedWith0 = 0;
$scope.moneyInitializedWithString = '3.53';
$scope.initializedPhoneNumber = '3133536767';
$scope.initializedCep = '30112010';
$scope.states = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA',
'MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR',
'RS','SC','SE','SP','TO'];
$scope.fixedStateIE = '0623079040081';
$scope.initializedState = 'SP';
$scope.initializedIE = 'P3588747709710';
$scope.initializedDateMask = new Date();
$scope.initializedWithISOStringDateMask = (new Date()).toISOString();
}
</script>
</head>
<body ng-app="demo">
<form name="form" ng-controller="ctrl">
<h2>ui-number-mask</h2>
<input type="text" name="field21" ng-model="numberWithoutGrupoSep" ui-number-mask ui-hide-group-sep> <br>
<span ng-bind="numberWithoutGrupoSep"></span> - {{form.field21.$error}}
<br>
<input type="text" name="field" ng-model="numberWithDefaultDecimals" ui-number-mask> <br>
<span ng-bind="numberWithDefaultDecimals"></span>
<br>
<input type="text" name="field2" ng-model="numberWith2Decimals" ui-number-mask="2" ui-negative-number> <br>
<span ng-bind="numberWith2Decimals"></span> - (accepts negative numbers. Press '-' to test)
<br>
<input type="text" name="field3" ng-model="numberWith3Decimals" ui-number-mask="3" min="3.8" max="numberWith2Decimals"> <br>
<span ng-bind="numberWith3Decimals"></span> {{form.field3.$error}}
<br>
<input type="text" name="field4" ng-model="numberWith0Decimals" ui-number-mask="0" min="numberWith3Decimals"> <br>
<span ng-bind="numberWith0Decimals"></span> - {{form.field4.$error}}
<br>
Number: <input type="text" name="field23" ng-model="numberWithDynamicDecimals" ui-number-mask="decimals">
Decimals: <input type="text" name="field22" ng-model="decimals" ui-number-mask=0><br>
<span ng-bind="numberWithDynamicDecimals"></span> - {{form.field23.$error}}
<br>
<h2>ui-percentage-mask</h2>
<input type="text" name="field5" ng-model="percentageWithDefaultDecimals" ui-percentage-mask> <br>
<span ng-bind="percentageWithDefaultDecimals"></span>
<br>
<input type="text" name="field6" ng-model="percentageWith4Decimals" ui-percentage-mask="4" min="percentageWithDefaultDecimals" max="115"> <br>
<span ng-bind="percentageWith4Decimals"></span> - {{form.field6.$error}}
<br>
Percentage: <input type="text" name="field25" ng-model="percentWithDynamicDecimals" ui-percentage-mask="pdecimals">
Decimals: <input type="text" name="field26" ng-model="pdecimals" ui-number-mask=0><br>
<span ng-bind="percentWithDynamicDecimals"></span> - {{form.field25.$error}}
<br>
<h2>ui-br-cpf-mask</h2>
<i>Same as the deprecated <b>ui-cpf-mask</b></i><br><br>
<input type="text" name="field7" ng-model="initializedCpf" ui-br-cpf-mask> <br>
<span ng-bind="initializedCpf"></span> - {{form.field7.$error}}<br>
<input type="text" name="field8" ng-model="fieldCpf" ui-br-cpf-mask> <br>
<span ng-bind="fieldCpf"></span> - {{form.field8.$error}}<br>
<h2>ui-br-cnpj-mask</h2>
<i>Same as the deprecated <b>ui-cnpj-mask</b></i><br><br>
<input type="text" name="field9" ng-model="initializedCnpj" ui-br-cnpj-mask> <br>
<span ng-bind="initializedCnpj"></span> - {{form.field9.$error}}<br>
<input type="text" name="field10" ng-model="fieldCnpj" ui-br-cnpj-mask> <br>
<span ng-bind="fieldCnpj"></span> - {{form.field10.$error}}<br>
<h2>ui-br-cpfcnpj-mask</h2>
<i>Same as the deprecated <b>ui-cpfcnpj-mask</b></i><br><br>
<input type="text" name="field11" ng-model="initializedCpfCnpj1" ui-br-cpfcnpj-mask> <br>
<span ng-bind="initializedCpfCnpj1"></span> - {{form.field11.$error}}<br>
<input type="text" name="field12" ng-model="initializedCpfCnpj2" ui-br-cpfcnpj-mask> <br>
<span ng-bind="initializedCpfCnpj2"></span> - {{form.field12.$error}}<br>
<input type="text" name="field13" ng-model="cpfcnpj" ui-br-cpfcnpj-mask> <br>
<span ng-bind="cpfcnpj"></span> - {{form.field13.$error}}<br>
<h2>ui-money-mask</h2>
<input type="text" name="field14" ng-model="defaultMoney" ui-money-mask> <br>
<span ng-bind="defaultMoney"></span> - {{form.field14.$error}}<br>
<input type="text" name="moneyField" ng-model="moneyStartedWith0" ui-money-mask> <br>
<span ng-bind="moneyStartedWith0"></span> - {{form.moneyField.$error}}<br>
<input type="text" name="moneyField2" ng-model="moneyInitializedWithString" ui-money-mask> <br>
<span ng-bind="moneyInitializedWithString"></span> - {{form.moneyField2.$error}}<br>
<input type="text" name="field15" ng-model="money3Decimals" ui-money-mask="3" min="defaultMoney" max="field16"> <br>
<span ng-bind="money3Decimals"></span> - {{form.field15.$error}}<br>
<input type="text" name="field16" ng-model="field16" ui-money-mask="0"> <br>
{{field16}} - {{form.field16.$error}}
<br>
Money: <input type="text" name="field27" ng-model="moneyWithDynamicDecimals" ui-money-mask="mdecimals">
Decimals: <input type="text" name="field28" ng-model="mdecimals" ui-number-mask=0><br>
<span ng-bind="moneyWithDynamicDecimals"></span> - {{form.field27.$error}}
<br>
<h2>ui-phone-number="br"</h2>
<input type="text" name="phoneNumber" ng-model="phoneNumber" ui-phone-number="br"><br>
<span ng-bind="phoneNumber">-</span> - {{form.phoneNumber.$error}}<br>
<br>
<input type="text" name="initializedPhoneNumber" ng-model="initializedPhoneNumber" ui-phone-number="br"><br>
<span ng-bind="initializedPhoneNumber">-</span> - {{form.initializedPhoneNumber.$error}}<br>
<br>
<h2>ui-phone-number="us"</h2>
<input type="text" name="phoneNumber2" ng-model="phoneNumber2" ui-phone-number="us"><br>
<span ng-bind="phoneNumber2">-</span> - {{form.phoneNumber2.$error}}<br>
<br>
<h2>ui-br-cep-mask</h2>
<input type="text" name="field17" ng-model="initializedCep" ui-br-cep-mask><br>
<span ng-bind="initializedCep"></span> - {{form.field17.$error}}<br>
<br>
<input type="text" name="field18" ng-model="cep" ui-br-cep-mask><br>
<span ng-bind="cep"></span> - {{form.field18.$error}}<br>
<br>
<h2>ui-br-ie-mask</h2>
<input type="text" name="field24" ng-model="fixedStateIE" ui-br-ie-mask="'MG'"><br>
<span></span>MG: <span ng-bind="fixedStateIE"></span> - <span ng-bind="form.field24.$error | json"></span><br>
<br>
<select ng-model="initializedState" ng-options="state for state in states"></select>
<input type="text" name="field19" ng-model="initializedIE" ui-br-ie-mask='initializedState'><br>
<span ng-bind="initializedState"></span>: <span ng-bind="initializedIE"></span> - <span ng-bind="form.field19.$error | json"></span><br>
<br>
<select ng-model="state" ng-options="state for state in states">
<option value="">--</option>
</select>
<input type="text" name="field20" ng-model="inscEst" ui-br-ie-mask="state"><br>
<span ng-bind="state"></span>: <span ng-bind="inscEst"></span> - <span ng-bind="form.field20.$error | json"></span><br>
<br>
</form>
</body>
</html>