mobiscroll.settings = {
lang: ' ',
theme: ' ',
themeVariant: ' '
};
angular
.module('demoApp', ['mobiscroll-numpad', 'mobiscroll-form'])
.controller('demoController', ['$scope', function ($scope) {
$scope.dusSettings = {
fill: 'ltr',
template: '(ddd) ddd-dddd',
allowLeadingZero: true,
validate: function (event, inst) {
if (inst.isVisible()) {
// Display the formatted value
inst._markup[0].querySelector('.mbsc-np-dsp').innerHTML = inst.settings.formatValue(event.values, event.variables, inst) || ' ';
}
return {
// Set the set button invalid until 10 chars filled
invalid: event.values.length != 10
};
},
formatValue: function (numbers, variables, inst) {
// Specify how the value will be formatted
return (numbers.length > 2 ? '(' : '') + numbers.slice(0, 3).join('') + (numbers.length > 2 ? ') ' : '') + numbers.slice(3, 6).join('') + (numbers.length > 5 ? '-' : '') + numbers.slice(6, 10).join('');
},
parseValue: function (v, i) {
if (v) {
return v.replace('(', '').replace(') ', '').replace('-', '');
}
}
};
$scope.iusSettings = {
fill: 'ltr',
template: '+1-ddd-ddd-dddd',
allowLeadingZero: true,
validate: function (event, inst) {
if (inst.isVisible()) {
inst._markup[0].querySelector('.mbsc-np-dsp').innerHTML = inst.settings.formatValue(event.values, event.variables, inst) || ' ';
}
return {
invalid: event.values.length != 10
};
},
formatValue: function (numbers, variables, inst) {
return '+1-' + numbers.slice(0, 3).join('') + (numbers.length > 2 ? '-' : '') + numbers.slice(3, 6).join('') + (numbers.length > 5 ? '-' : '') + numbers.slice(6, 10).join('');
},
parseValue: function (v, i) {
if (v) {
return v.replace('+1', '').replace(/-/gm, '');;
}
}
};
$scope.igeSettings = {
fill: 'ltr',
template: '+49-dd-ddd-ddddd',
allowLeadingZero: true,
validate: function (event, inst) {
if (inst.isVisible()) {
inst._markup[0].querySelector('.mbsc-np-dsp').innerHTML = inst.settings.formatValue(event.values, event.variables, inst) || ' ';
}
return {
invalid: event.values.length != 10
};
},
formatValue: function (numbers, variables, inst) {
return '+49-' + numbers.slice(0, 2).join('') + (numbers.length > 1 ? '-' : '') + numbers.slice(2, 5).join('') + (numbers.length > 4 ? '-' : '') + numbers.slice(5, 10).join('');
},
parseValue: function (v, i) {
if (v) {
return v.replace('+49', '').replace(/-/gm, '');
}
}
};
}]);
<div ng-app="demoApp" ng-controller="demoController">
<div mobiscroll-form>
<label>
Domestic US
<input mbsc-input ng-model="dus" mobiscroll-numpad="dusSettings" data-input-style="box" data-label-style="stacked" placeholder="Enter phone number..." />
</label>
<label>
International US
<input mbsc-input ng-model="ius" mobiscroll-numpad="iusSettings" data-input-style="box" data-label-style="stacked" placeholder="Enter phone number..." />
</label>
<label>
International German
<input mbsc-input ng-model="ige" mobiscroll-numpad="igeSettings" data-input-style="box" data-label-style="stacked" placeholder="Enter phone number..." />
</label>
</div>
</div>