Usage

Create a div tag in html file with specific id for example CheckBoxArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:

HTML file:

<div id="CheckBoxArea" ng-init="init()"></div>

Javascript file:


        var data ={"checkbox_default_data" : {"id":1, "label":"Default check box", "type":"default", "checked":true},"checkbox_primary_data" : {"id":2, "label":"Primary check box", "type":"primary", "checked":false},"checkbox_success_data" : {"id":3, "label":"Success check box", "type":"success", "checked":true},"checkbox_danger_data" : {"id":4, "label":"Error check box", "type":"danger", "checked":true},"checkbox_warn_data" : {"id":5, "label":"Warn check box", "type":"warning", "checked":false},"checkbox_info_data" : {"id":6, "label":"Info check box", "type":"info", "checked":true}};

        $scope.init = function() {
            loadCheckBox();
        }

         function loadCheckBox() {
            var check_box_tpl = $(modelTemplate).filter('#checkBoxes').html();

            var html = Mustache.to_html(check_box_tpl, data.checkbox_default_data);
            $('#CheckBoxArea').html(html);

            var html = Mustache.to_html(check_box_tpl, data.checkbox_primary_data);
            $('#CheckBoxArea').append(html);

            var html = Mustache.to_html(check_box_tpl, data.checkbox_success_data);
            $('#CheckBoxArea').append(html);

            var html = Mustache.to_html(check_box_tpl, data.checkbox_danger_data);
            $('#CheckBoxArea').append(html);

            var html = Mustache.to_html(check_box_tpl, data.checkbox_warn_data);
            $('#CheckBoxArea').append(html);

            var html = Mustache.to_html(check_box_tpl, data.checkbox_info_data);
            $('#CheckBoxArea').append(html);
        }

Checkboxes