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