An angularjs switch / toggle, that works in IE8 and modern browser will get css 3 transitions.

Code can be found at: http://plnkr.co/edit/wBFKg33JxG7ABIHBvtik?p=preview           Based on the code found at: http://codepen.io/iamtyce/pen/kxrhC   html template <div class="toggle toggle-alternate {{ value }}"> <label class="{{ value }}">{{ getSwitchText() }}</label> <input ng-class="{ isChecked: value == ‘off’ }" type="radio" name="toggle" value="off" ng-model="value"> <input ng-class="{ isChecked: value == ‘on’ …

Start progress animation (infinite rotate / spin) on click, without using angulars animation service ($animate).

  See code at, Plunker: http://plnkr.co/edit/jUzCC1FmtgxdX4gWTVIW?p=preview   I used a custom directive with isolated scope: <!– App scripts –> <script> (function () { "use strict"; // This is the starting point (main) for the angular app. var app = angular.module("spike", []); }()); (function () { "use strict"; // Adds an …

Add animation on dom event, by using a custom directive, the AngularJS $animate service and the Animate.css library.

  Here’s is the code:   http://plnkr.co/edit/EdHyzxwLTfNRXFHj9iU1?p=preview   Yes, yes I know this can easily be done with the standard AngularJS ngAnimate directive, but I wanted to play around with a custom directive, isolated scope and the AngularJS $animate service. So I decided to use a wobble effect from the …

How to sort items in a list with ng-repeat

Just a nice example on how to sort items in a list with ng-repeat: http://plnkr.co/edit/qa6LdhDdggApWPmOrwGD?p=preview <!DOCTYPE html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike"> <head> <!– This page can be used as a base for spiking with jQuery, AngularJS and Kendo. All scripts and styles are loaded from a CDN or inline. –> …

Show hierarchy in combobox items, with Kendo and AngularJS.

Here is a plunkr showing a combobox with hierarchy: http://plnkr.co/edit/PaiRPD6dZNq0JaT2Tkdg?p=preview     <!DOCTYPE html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike"> <head> <!– This page can be used as a base for spiking with jQuery, AngularJS and Kendo. All scripts and styles are loaded from a CDN or inline. –> <title>Spike page</title> <meta …