FlatUI checkbox, radio and switch w/ AngularJS

app.js

(function() {
  angular.module('flatuiApp', ['flatuiApp.controllers', 'flatuiApp.directives']);
  angular.module('flatuiApp.controllers', []);
  angular.module('flatuiApp.directives', []);
})();

Flat UI directives.md

##Angular directives for Flat UI

• checkboxes
• radio buttons
• switches

Check the JSFiddle

###Example

Sample index.html app.js and controller demonstate the directives' usage.

To try it out: download the Gist, untar and serve

python -m SimpleHTTPServer

Note: Don't load Flat UI's checkbox, radio or switch javascript files

flatui.controllers.js

(function() {
  angular.module('flatuiApp.controllers')
    .controller('FlatUICtrl', [
      '$scope', function($scope) {
        $scope.checkbox1 = {};
        $scope.checkbox1.options = [
          {
            "name": "check1",
            "id": 1,
            "selected": true
          }, {
            "name": "check2",
            "id": 2,
            "selected": false
          }
        ];
        $scope.radio1 = {};
        $scope.radio1.options = [
          {
            "name": "radio1",
            "id": 1
          }, {
            "name": "radio2",
            "id": 2
          }, {
            "name": "radio3",
            "id": 3
          }
        ];
        $scope.radio1.selected = $scope.radio1.options[0].id;
        $scope.switch1 = false;
      }
    ]);
})();

flatui.directives.js

(function() {
  angular.module('flatuiApp.directives')
    .directive("flatuiRadio", function() {
      return {
        restrict: "AE",
        template: '<label ng-class="{\'checked\': model == value, \'disabled\': disabled}" class="radio">{{label}}<span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" ng-model="model" ng-disabled="disabled" ng-value="value" ng-required="required" name="name"/></label>',
        replace: true,
        scope: {
            model: "=",
            label: "=",
            value: "=",
            required: "=",
            name: "=",
            disabled: '@'
        },
        compile: function(element, attrs) {
            if (attrs.disabled === void 0) {
                attrs.disabled = false;
            } else {
                attrs.disabled = true;
            }
        }
        };
    })
  .directive("flatuiCheckbox", function() {
    return {
      restrict: "AE",
      template: '<label ng-class="{\'checked\': model, \'disabled\': disabled}" class="checkbox">{{label}}<span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span><input type="checkbox" ng-model="model" ng-disabled="disabled" ng-value="value" ng-required="required" name="name"/></label>',
      replace: true,
      scope: {
        model: "=",
        label: "=",
        value: "=",
        required: "=",
        name: "=",
        disabled: "@"
      },
      compile: function(element, attrs) {
        if (attrs.disabled === void 0) {
          attrs.disabled = false;
        } else {
          attrs.disabled = true;
        }
      }
    };
  })
  .directive('flatuiSwitch', function() {
    return {
      restrict: 'AE',
      template: '<div ng-click="model = disabled && model || !disabled && !model" ng-class="{\'deactivate\': disabled, \'switch-square\': square}" class="switch has-switch"><div ng-class="{\'switch-off\': !model, \'switch-on\': model}" class="switch-animate"><span ng-bind="onLabel" class="switch-left"></span><label>&nbsp</label><span ng-bind="offLabel" class="switch-right"></span></div></div>',
      replace: true,
      scope: {
        model: '=',
        disabled: '@',
        square: '@',
        onLabel: '@',
        offLabel: '@'
      },
      compile: function(element, attrs) {
        if (attrs.onLabel === void 0) {
          attrs.onLabel = 'ON';
        }
        if (attrs.offLabel === void 0) {
          attrs.offLabel = 'OFF';
        }
        if (attrs.disabled === void 0) {
          attrs.disabled = false;
        } else {
          attrs.disabled = true;
        }
        if (attrs.square === void 0) {
          attrs.square = false;
        } else {
          attrs.square = true;
        }
      }
    };
  });
})();

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FlatUI AngularJS Template</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="//designmodo.github.io/Flat-UI/css/flat-ui.css">
    <!--HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file.-->
    <!--[if lt IE 9]-->
    <script src="//designmodo.github.io/Flat-UI/js/html5shiv.js"></script>
    <!--[endif]-->
  </head>
  <body ng-app="flatuiApp">
    <div ng-controller="FlatUICtrl" class="container">
      <div class="row">
        <div class="col-md-2">
        <flatui-checkbox ng-repeat="item in checkbox1.options" model="item.selected" label="item.name" value="item.id" name="valcontainer0"></flatui-checkbox>
        </div>
        <div class="col-md-2">
          <flatui-checkbox ng-repeat="item in checkbox1.options" model="item.selected" label="item.name" value="item.id" name="valcontainer0" disabled=""></flatui-checkbox>
        </div>
        <div class="col-md-2">
          <flatui-radio ng-repeat="item in radio1.options" model="radio1.selected" label="item.name" value="item.id" name="valcontainer1"></flatui-radio>
        </div>
        <div class="col-md-2">
          <flatui-radio ng-repeat="item in radio1.options" model="radio1.selected" label="item.name" value="item.id" name="valcontainer1" disabled=""></flatui-radio>
        </div>
        <div class="col-md-2">
          <flatui-switch model="switch1"></flatui-switch>
        </div>
        <div class="col-md-2">
          <flatui-switch model="switch1" square="" disabled=""></flatui-switch>
        </div>
      </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="/app.js"></script>
    <script src="/flatui.controllers.js"></script>
    <script src="/flatui.directives.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery-1.8.3.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery.ui.touch-punch.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/bootstrap.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/bootstrap-select.js"></script>
    <!-- These three are replaced -->
    <!-- <script src="//designmodo.github.io/Flat-UI/js/bootstrap-switch.js"></script> -->
    <!-- <script src="//designmodo.github.io/Flat-UI/js/flatui-checkbox.js"></script> -->
    <!-- <script src="//designmodo.github.io/Flat-UI/js/flatui-radio.js"></script> -->
    <script src="//designmodo.github.io/Flat-UI/js/jquery.tagsinput.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery.placeholder.js"></script>
    <script src="//vjs.zencdn.net/4.3/video.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/application.js"></script>

</body>
</html>

Hmm, it seems designmodo changed their project name on bower, it seems to no longer be called 'flat-ui-official' but 'flat-ui'. Also, it seems like different markup is now neccesary for these three components to display properly, or am i mistaken?

New component lay out can be found here: http://designmodo.github.io/Flat-UI/docs/components.html#fui-switch

I've tried to modify the switch with success. the new template should be something like this:

<div ng-class="{'bootstrap-switch-handle-off': disabled, 'bootstrap-switch':!square, 'bootstrap-switch-square': square}"
  ng-click="model = disabled && model || !disabled && !model">
  <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-animate"
    ng-class="{'bootstrap-switch-off': !model, 'bootstrap-switch-on': model}">
    <div class="bootstrap-switch-container">
      <span class="bootstrap-switch-handle-on bootstrap-switch-primary">
        <i class="fui-check"></i>
      </span>
      <label class="bootstrap-switch-label">&nbsp;</label>
      <span class="bootstrap-switch-handle-off bootstrap-switch-default">
        <i class="fui-cross"></i>
      </span>
      <input type="checkbox" data-toggle="switch" name="switch" id="custom-switch"
      data-on-text="<i class='fui-check'></i>" data-off-text="<i class='fui-cross'></i>">
    </div>
  </div>
</div>

I have not tested this fully, for example not for round switch behaviour but it should work.
[edit] hmm, bugs all over the place. these new component layouts don't seem to work so well with my current app design. weird. anyone else having trouble here?

The checkbox just 'works' (at least for me :>) with the new layout / template:

<label class="checkbox">
  <input type="checkbox" checked="" data-toggle="checkbox" class="custom-checkbox"
  ng-model="model" ng-disabled="disabled" ng-value="value" ng-required="required" name="name">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
  {{label}}
</label>