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>

Nice, thank you!

When viewing in Firefox on Ubuntu, I get weird icons instead of the proper FlatUI ones:

The error occurs as the font-face for the icons is blocked. You can see the error by checking the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://designmodo.github.io/Flat-UI/fonts/.... This can be fixed by moving the resource to the same domain or enabling CORS.

This won't happen if you host the Flat-UI css/fonts instead of referencing them from their demo page like I did for this quick example.

bower install git://github.com/designmodo/Flat-UI/

and then edit index.html to use Flat-UI files from bower_components/

Short question: this directive does not really activate a two-way data binding? The models binds to other models within the DOM but not to the controller scope variables?

Why isn't it two way?

Here's where the radio button variable is initialized inside the controller:

$scope.radio1.selected = $scope.radio1.options[0].id;

Great, thanks! will receive a mention if ever my node-webkit app gets done ;)

Thanks for this saved me a lot of work!

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>