Skip to content

Instantly share code, notes, and snippets.

@petehamilton
Last active December 19, 2015 17:39
Show Gist options
  • Save petehamilton/5993366 to your computer and use it in GitHub Desktop.
Save petehamilton/5993366 to your computer and use it in GitHub Desktop.
FlatUI Radio Button Directive for AngularJS

FlatUI RadioButton AngularJS Directive

This means you can ignore the "flatui-radio.js" file and just use plain angular. Not had any problems so far.

screen shot 2013-07-14 at 07 07 19

'use strict';
angular.module('flatui.radioButtonController', [])
.controller('FlatUIRadioButtonController', [
'$scope',
function FlatUIRadioButtonController($scope) {
$scope.checked = function() {
return $scope.value === $scope.model;
};
}
]);
'use strict';
angular.module('flatui.radioButton', [
'flatui.radioButtonController'
]).directive('flatuiRadioButton', [
function flatUIRadioButtonDirective() {
return {
restrict: 'E',
templateUrl: 'app/shared/components/flatui-radiobutton/' +
'flatui-radiobutton-template.html',
scope: {
model: '=',
label: '=',
value: '=',
required: '=',
name: '='
},
controller: 'FlatUIRadioButtonController',
replace: true
};
}
]);
<label class="radio" ng-class="{checked: checked()}">
<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-value="value"
ng-required="true"
name="name"/>
{{label}}
</label>
@grantgeorge
Copy link

@jules-winnfield Thanks! Just got it working myself through the same GIST post.

How are you guys using the value and model of the directive? Right now, I have my value inverting the value of the model which is the only way to get the radio to update.

Controller:

$scope.thing = {"name": "thing1", "id": 1, "selected": true};

View:

<fui-radio
  model="thing.selected"
  label="thing.name"
  value="!thing.selected"
  required="true"
  name="valcontainer2">
</fui-radio>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment