Skip to content

Instantly share code, notes, and snippets.

@michahell
Forked from cirqueit/Flat UI directives.md
Last active August 29, 2015 14:06
Show Gist options
  • Save michahell/8391588ab49cdbc4328a to your computer and use it in GitHub Desktop.
Save michahell/8391588ab49cdbc4328a to your computer and use it in GitHub Desktop.
(function() {
angular.module('flatuiApp', ['flatuiApp.controllers', 'flatuiApp.directives']);
angular.module('flatuiApp.controllers', []);
angular.module('flatuiApp.directives', []);
})();

##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

(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;
}
]);
})();
(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;
}
}
};
});
})();
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment