Good article on the basics of CSS animations in Angular 1.x
Just a good solid read: https://css-tricks.com/animations-the-angular-way/
Tag: AngularJS
How to dynamically load template for a directive in AngularJS
If you want to dynamically load a template for a directive in AngularJS, just follow the steps found at: https://medium.com/angularjs-meetup-south-london/angular-directives-using-a-dynamic-template-c3fb16d03c6d Something like: HTML JavaScript
How to validate an entered text to a min date in a kendo datepicker in AngularJS.
The code and live preview can be found here: http://plnkr.co/edit/jdnRjO?p=preview When no date is entered a “pink” border will be shown: When a date is entered that’s before the “min” date a “pink” border will be shown: When a date on or after the min date …
Using a custom AngularJS validation directive to validate an entered text in a kendo combo box.
See the plunker for the code: http://plnkr.co/edit/WroQIwLj4K8vUlVOCkDx?p=preview When no text is entered, the kendo combo box should be invalid: When a text is entered, that does not match a valid entry, the kendo combo box should be invalid: When a text is entered, that does match …
A little AngularJS directive for setting focus on model change.
I created a simple plunker based on http://www.emberex.com/programmatically-setting-focus-angularjs-way/ When the user clicks on the button the textarea gets focused. Here is the code: http://plnkr.co/edit/eo7es1xZTdB274BQNXMV?p=preview
How to show html embeded inside JSON to the user with AngularJS and ngSanitize.
I want to show HTML to the user, that was stored in a SQL Server Database. The data was queried from the SQL Server Database by using Entity Framework, then the C# model was converted to JSON, by using JSON.net and send to the browser by the ASP …
Dynamic loading of views as directives in an AngularJS wizard.
Demo and Code can be found at: http://plnkr.co/edit/Ht4ud6kyJUzDTQdS9MI2?p=preview Just for the fun, I added a D3.js chart: A simple AngularJS wizard that dynamically loads pages (views). In the plunker each page is a *.html file that is loaded by dynamically setting a viewmodel property “pageTemplateUrl”: ng-include="pageTemplateUrl" …
AngularJS tip, quote your css classnames in ng-class
It is a common practice to use spinalcase in CSS, like the css class “.ada-wizard-marker”. If you want to use this class in a ng-class directive, where the input is an object, use single quotes, like: ng-class="{ ‘ada-wizard-marker’: vm.showToolTip }" If you don’t use the single quotes, ng-class will not …
Using css animation with angular, to show and hide a massive angular tooltip in a responsive layout.
Code can be found at: http://plnkr.co/edit/xarxPAKTXrEIDKUHmapg?p=preview I was asked to show a tooltip with AngularJS in a responsive layout, so I created a Plunker, that will form the base of my code. Note: resize the screen to test the responsiveness. Initial state Clicked on Tile 3 HTML …
Setting height / width sparklines and removing spacing with Kendo UI and AngularJS
In the following screendump, I used 6 sparkline fields: To increase the width / height of the sparkline (bar) I set the following values: – charArea options (height, padding, margin) – Series options (gap and spacing) $scope.kostenMinderPersoneelChartOptions = { chartArea: { background: “”, height: 17, margin: { top: …