Usage

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

NOTE: Creation of Table and Buttons are explained in previous sections

HTML file:

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

<div id="managementDialog"></div>

Javascript file:



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

          function loadprv() {
             var dialog = $(modelTemplate).filter('#dialog').html();
             var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
             $('#managementDialog').html($compile(dialog)($scope));
             $('#managementDialog .modalHeader').html('<h5 class="modal-title titlestyle">Modal Header</h5>');
             $('#managementDialog .modalBodyContent').html('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">Name</label> <div class="col-xs-8 provinceName" > </div> </div>');
              var dataText = {"ErrMsg" :     {"errmsg" : "Please input Name.", "modalVar":"province.province_name", "placeholder":"Name", "errtag":"ptextboxErr", "errfunc":"validatetextbox"}};
             $('#managementDialog .provinceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));
             var modelSubmit_data = {"title":"OK", "clickAction":"saveData(province.id)"};
             var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);
             $('#managementDialog #footerBtns').html($compile(modelSubmit_html)($scope));
             var modelDelete_data = {"title":"Cancel", "clickAction":"closeModal()"};
             var modelDelete_html = Mustache.to_html(def_button_tpl, modelDelete_data);
             $('#managementDialog #footerBtns').append($compile(modelDelete_html)($scope));
             $scope.validatetextbox = function (value){
            if($scope.province.province_name) {
                $scope.ptextboxErr = false;
            }
            else
                $scope.ptextboxErr = true;
        }
        }

{{message}}