Types of Buttons

Default Buttons

Visual Buttons

Different Sized Buttons

Icon Buttons

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

HTML file:
<div id="buttonArea" ng-init="init()"></div>
<div id="defaultButtonArea" ></div>
<div id="visualButtonArea" ></div>
<div id="sizeButtonArea" ></div>
<div id="iconButtonArea" ></div>

Javascript file:

       var data ={"default_btn_data" : {"def_button" : {"title":"Default"},"def_print_button" : {"title":"Print", "type":"btn btn-default", "gType": "glyphicon-print", "iconPosition":"left"},"def_print_button_right" : {"title":"Search", "type":"btn btn-default", "gType": "glyphicon-search", "iconPosition":"right"}},"visual_btn_data" : { "vis_pri_btn_data" : {"title":"Primary", "type":"primary"},"vis_sec_btn_data" : {"title":"Secondary", "type":"secondary"},"vis_succ_btn_data" : {"title":"Success", "type":"success"},"vis_inf_btn_data" : {"title":"Info", "type":"info"},"vis_warn_btn_data" : {"title":"Warning", "type":"warning"},"vis_dang_btn_data" : {"title":"Danger", "type":"danger"},"vis_link_btn_data" : {"title":"Link", "type":"link"}},"diffSize_btn_data" : {"size_small_btn_data" : {"title": "Small Button", "type": "primary", "size": "btn-sm"},"size_large_btn_data" : {"title": "Large Button", "type": "primary", "size": "btn-lg"},"size_block_btn_data" : {"title": "Large Block Button", "type": "primary", "size": "btn-lg btn-block"}},"icon_btn_data" : {"search_icon_btn_data" : {"title": "Search Icon", "type": "btn-default", "gType": "glyphicon-search"},"search_icon_styled_btn_data" : {"title": "Styled Search Icon", "type": "primary", "gType": "glyphicon-search"},"print_icon_btn_data" : {"title": "Print", "type": "primary btn-lg", "gType": "glyphicon-print"}}};

        $scope.init = function() {
                    defaultButtons();
                    visualButtons();
                    sizeButtons();
                    iconButtons();
        }

           function defaultButtons(){
            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
            var def_icon_button_tpl = $(modelTemplate).filter('#defaultIconButtons').html();

            var html = Mustache.to_html(def_button_tpl, data.default_btn_data.def_button);
            $('#defaultButtonArea').html(html);

            var html = Mustache.to_html(def_icon_button_tpl, data.default_btn_data.def_print_button);
            $('#defaultButtonArea').append(html);

            var html = Mustache.to_html(def_icon_button_tpl, data.default_btn_data.def_print_button_right);
            $('#defaultButtonArea').append(html);
        }


        function visualButtons(){

            var visual_button_tpl = $(modelTemplate).filter('#visualButtons').html();

            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_pri_btn_data);
            $('#visualButtonArea').html(html);

            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_sec_btn_data);
            $('#visualButtonArea').append(html);

            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_succ_btn_data);
            $('#visualButtonArea').append(html);

            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_inf_btn_data);
            $('#visualButtonArea').append(html);

            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_warn_btn_data);
            $('#visualButtonArea').append(html);

            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_dang_btn_data);
            $('#visualButtonArea').append(html);

            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_link_btn_data);
            $('#visualButtonArea').append(html);
        }

        function sizeButtons() {
            var size_button_tpl = $(modelTemplate).filter('#sizeButtons').html();

            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_small_btn_data);
            $('#sizeButtonArea').html(html);

            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_large_btn_data);
            $('#sizeButtonArea').append(html);

            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_block_btn_data);
            $('#sizeButtonArea').append(html);

        }

        function iconButtons() {
            var icon_button_tpl = $(modelTemplate).filter('#iconButtons').html();

            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.search_icon_btn_data);
            $('#iconButtonArea').html(html);

            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.search_icon_styled_btn_data);
            $('#iconButtonArea').append(html);

            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.print_icon_btn_data);
            $('#iconButtonArea').append(html);

        }