FlatUI Radio Button Directive for AngularJS

README.md

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.

flatui-radio-button-controller.js

'use strict';

angular.module('flatui.radioButtonController', [])
.controller('FlatUIRadioButtonController', [
  '$scope',
  function FlatUIRadioButtonController($scope) {
    $scope.checked = function() {
      return $scope.value === $scope.model;
    };
  }
]);

flatui-radio-button-directive.js

'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
    };

  }
]);

flatui-radio-button-template.html

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

Finally we got it working. A good help was this GIST

We have just copied this code here into an own directive called fuiradio. Than you can include it in any partials like:

If you want to use simple strings in label and value (obey the single quotes):

<fuiradio 
    label="'Some Label'" 
    model="your_model_name" 
    value="'some_value_string'">
</fuiradio>

Or if you want to use dynamic labels and values:

<fuiradio 
    label="label_variable_name" 
    model="your_model_name" 
    value="value_variable_name">
</fuiradio>

Hope this helps!

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