a working example of setting up flat-ui checkboxes to work with angular.js

README.md

#README

If you're fairly new at working with angular.js and want to do some interaction with FlatUI checkboxes / radio buttons, you might have a bit of a tough time getting things to work.

There's some references about how to get things going for radio buttons, which is about the same thing, but there isn't a good example out there of how to actually use it:

• https://gist.github.com/petehamilton/5993366 this will let you know how to write the directive for a similiar radio button
• designmodo/Flat-UI#57 this is about events (not) firing

This is a working example by someone who's had no experience with angular.js before. Here's a few things that weren't obvious to me at first:

• you HAVE to REMOVE the flatui-checkbox.js file from your import list. Keeping it there will not let this work (there's some event handling there that's probably the cause of that).
• inside the template or wherever else, 'model' refers to the actual property that will be set to true / false depending on the checkbox

flatui-checkbox-button-template.html

<label class = 'checkbox' ng-class="{checked: model}">
  <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-value="value"
         ng-required="required"
         name="name"
         data-toggle="checkbox" />
  {{label}}
</label>

flatui-checkbox-directive.js

app.directive("yCheckBox", [function yCheckBox($scope) {
    return {
        restrict: "AE",
        templateUrl: "flatui-checkbox-button-template.html",
        scope: {
            model: "=",
            label: '=',
            value: '=',
            required: '=',
            name: '='                    
        },
        replace: true,
    }
}]);

sample-usage.html

     <script type="text/javascript">
        var app = angular.module("checkboxtest", ['underscore']); 

        var underscore = angular.module('underscore', []);
        underscore.factory('_', function() {
          return window._; // assumes underscore has already been loaded on the page
        });
        
        //  assuming that the directive is already in the app space

        app.controller("InteractionCtrl", function InteractionCtrl($scope, _) {
            // set up some test data
            $scope.items = [{"name": "item1", "id": 1, "selected": true}, {"name": "item2", "id": 2, "selected": false}];
            
            //  set up selected items container
            $scope.valcontainer = function valcontainer() {
                return _.filter($scope.items, function(i) { return i.selected == true; })
            }

        })
     </script>
    <div class="container" ng-controller = "InteractionCtrl">
        <ul>
            <li ng-repeat = "item in items" model="item" label="item.name">
                <div yradiobutton 
                    model="item.selected"
                    label="item.name"
                    value="item.id"
                    required="true"
                    name="valcontainer" />
            </li>
        </ul>

        Container: {{ valcontainer() }}
    </div>

more like y-check-box?