Default currency input no valueDefault currency input with centsDefault currency input integers only (no cents)Disabled default currency input integers only (no cents)Currency input with ng-change eventCurrency input with ngFocus eventCurrency input with ngBlur eventCurrency input with clearOnInitialFocus set to trueCurrency input with custom validation odd digits only
Currency input with custom validation Max 4 Chars (no-cents)
Currency input with min and max (between 1 and 1000)
Is valid?: {{ contentSelectorForm.contentSelector.$valid }}
Notification
Try pairing with ngSticky to give your notifications some staying power.
<ws-notification type="danger" dismissible="false" actionable="false" body-string="Something bad happened :("></ws-notification>
<ws-notification type="success" dismissible="false" actionable="false" body-string="Something good happened :)"></ws-notification>
<ws-notification type="info" dismissible="false" actionable="false" body-string="Something informative happened :|"></ws-notification>
<ws-notification type="neutral" dismissible="true" dismiss="yell('You dismissed me, how could you :(')" actionable="false" body-string="Something neautral happened and you can dismiss it :\"></ws-notification>
<ws-notification timeout="5000" type="success" dismissible="false" actionable="false" body-string="I will disapear in a few seconds much like your fading youth."></ws-notification>
<ws-notification type="danger" dismissible="false" actionable="false" header-string="Something happened" body-string="... and it must be important, look ^ it even has a header \ (•◡•) /"></ws-notification>
<ws-notification type="neutral" dismissible="true" actionable="true" header-string="Whoa!" body-string="... something happened and you can do a thing. I wonder what it does ⚆ _ ⚆ " action-string="Press it" action="yell('👏 Bravo, want a 🍪?')"></ws-notification>
$scope.somePromiseReturingFunction = () => {
return $timeout(() => {
console.log('called after action button is clicked');
}, 1000);
};
$scope.someOtherPromiseReturingFunction = () => {
return $timeout(() => {
console.log('called after dismiss button is clicked');
}, 1000);
};
<ws-modal
on-action="somePromiseReturingFunction()"
on-cancel="someOtherPromiseReturingFunction()">
<ws-modal-trigger>
Click me to open a modal.
</ws-modal-trigger>
<ws-modal-body>
Whatever HTML you want in here, including other directives.
</ws-modal-body>
</ws-modal>
<ws-modal
on-action="somePromiseReturingFunction()"
on-cancel="someOtherPromiseReturingFunction()"
trigger-id="fancy-modal">
<ws-modal-trigger>
Click me to open a <b><i><u>FANCY</u></i></b> modal.
</ws-modal-trigger>
<ws-modal-body>
<p><b>Whatever</b> HTML you want in here, <i><u>including other directives</i></u>.</p>
</ws-modal-body>
<ws-modal-action>
<h2>Make it so, #1.</h2>
</ws-modal-action>
<ws-modal-dismiss>
<smaller>Actually, nope.</smaller>
</ws-modal-dismiss>
<ws-modal-progress>
Just you wait!
</ws-modal-progress>
</ws-modal>
<a ng-click="wsModalTriggerService.openModal('fancy-modal')">
Open modal from external trigger
</a>
Click me to open a modal.
Whatever HTML you want in here, including other directives.
Click me to open a FANCY modal.
Whatever HTML you want in here, including other directives.
If you can, use the declarative modal instead. It avoids the need for
`bind-html` and results in cleaner code in many cases.
$scope.openModal = () => {
wsModalService.open({
bodyString: 'Some <b>text</b> to put inside of the modal body.',
actionString: 'Confirm this action',
actionInProgressString: 'Confirming...',
dismissString: 'Cancel',
action: (cb) => {
// You may have an asynchronous AJAX call here. We'll simulate
// that with a timeout.
setTimeout(() => {
console.log('called after Confirm button is clicked');
cb();
}, 1000);
},
dismiss: () => {
console.log('called after Cancel link is clicked');
},
});
};
$scope.expanderExpanded = function (instanceId) {
console.log('OHAI', instanceId);
}
$scope.expanderCollapsed = function (instanceId) {
console.log('KTHXBAI', instanceId);
}
<ws-expander
show-text="Show details"
hide-text="Hide details"
on-expand="expanderExpanded('expanderInstance1')"
on-collapse="expanderCollapsed('expanderInstance1')">
<ws-expander-header>
<h5>Whatever you want in the header.</h5>
</ws-expander-header>
<ws-expander-body>
<p>Whatever you want in the body</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
feugiat lacinia orci faucibus dignissim. Donec pharetra, ipsum a
aliquam pharetra, felis libero ornare nunc, et egestas nisi nisi ac
metus.
</p>
</ws-expander-body>
</ws-expander>
<div style="width: 300px">
<ws-expander
show-text="Reveal further considerations"
hide-text="Obscure extraneous minutiae"
toggle-width-percent="80">
<ws-expander-header>
<h5>Yo</h5>
</ws-expander-header>
<ws-expander-body>
<p>OHAI</p>
</ws-expander-body>
</ws-expander>
</div>
Whatever you want in the header.
Whatever you want in the body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
feugiat lacinia orci faucibus dignissim. Donec pharetra, ipsum a
aliquam pharetra, felis libero ornare nunc, et egestas nisi nisi ac
metus.
Yo
OHAI
Signature Pad
$scope.saveSignature = function(data) {
console.log('What a fine looking signature you have!');
$scope.signatureData = data;
}
$scope.redoSignature = function() {
$scope.signatureData = null;
}
$scope.changingDate = new Date('Tue Jan 25 2017 00:00:00 GMT-0400 (EDT)');
let currentDateIsDefault = true;
$scope.changeDate = function() {
if (currentDateIsDefault) {
$scope.changingDate = new Date('Tue Jan 25 2017 00:00:00 GMT-0400 (EDT)');
}
else {
$scope.changingDate = new Date('Tue Dec 24 2017 00:00:00 GMT-0400 (EDT)');
}
currentDateIsDefault = !currentDateIsDefault;
}
Default settings
<ws-date-picker>
</ws-date-picker>
Default date, min and max dates, disabled dates
<ws-date-picker default-date="'2017-01-04'" min-date="2017-01-01" max-date="2017-01-25" disabled-dates="['2017-01-05', '2017-01-20']" disable-weekends="true">
</ws-date-picker>
Date format, min and max years
<ws-date-picker format="'yyyy-MM-dd'" min-year="2016" max-year="2017" disabled-dates="['Feb 1, 2017', 'Feb 7, 2017', '2017/02/08']"
default-date="'Feb 10, 2017'">
</ws-date-picker>
Disable business days, first day of week
<ws-date-picker format="'d, M, yy'" disable-next-n-business-days="7" first-day-of-week="monday">
</ws-date-picker>
Editable input
<ws-date-picker editable="true">
</ws-date-picker>
<div>Setting data with ngModel</div>
<button ng-click="changeDate()" class="button primary-action">Change date</button>
<ws-date-picker ng-model="changingDate" min-date="2017-01-01">
</ws-date-picker>
Default settings
Default date, min and max dates, disabled dates
Date format, min and max years
Disable business days, first day of week
Editable input
Setting data with ngModel
Multiple Inputs
$scope.multipleInputCompleted = function (result) {
console.log('Multiple inputs form completed with ' + result);
}
$scope.multipleInputReadonly = false;