Natan Santolo

Web Craftsman

Angular Switchery

I built a directive with two-way binding support for Switchery.

Switchery

Alexander built this beautiful checkbox component called Switchery. From their website: «Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.»

Spaaza Screenshot

I’ve used it along different projects, I’m really happy with it. But when I tried to included in a project using AngularJS, I found a few challenges. Although there are a few directives around (like NgSwitchery), I couldn’t find one with support for two-way binding, I needed to keep my models updated. So I went for it and built a new directive.

Spaaza Screenshot

Here’s Angular Switchery, a directive that transform a simple checkbox into a switch, and supports two way bindings to scope variables, to keep view and data in sync. You’ll find the code and install instructions in Github.

Run this JSFiddle to see it working or check the demo

I hope you find this useful :)