How to generate DIV dynamically from Sql data from server in AngularJS file?

Question

I have to add element as per the data coming from mssql server in the following area :

    <div id="ApplicationForm" class="tabcontent" style="display:none;">
                            <div class="tab_section">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-lg-12" style="font-size:16px;">Application Form</div>
                                        <div class="col-lg-12">
                                            <div class="" style="width:100%;border-bottom:1px solid #ddd;padding-top:5px;margin-bottom:10px;"></div>
                                        </div>
                                    </div>
                                    <div ng-bind-html="applnformdata"> //from here on the data should be dynamic 

                                            </div>
                                        </div>
                                        </div>
                                   </div>
                            </div>
                      </div>

(Sorry if I left any ending div tag).

On click of a button I'm calling a function in angularJs

  $scope.dynamicdata=function(){
      Method.getbyId("xxxxxxxxxxxx", Id).then(function (response) {
                var newEle = '';
                for ( i = 0; i < response.data.length;i++){

                    newEle += "<div class='form-group col-lg-6'>< label class='form_lable' >" + response.data[i].fieldName + "</label ><div class='m_settings_cell'><input type='checkbox' class='m_switch_check' value='1' entity='Test 1'></div></div>";  //when I try to do this it doesnot loads the <label> tag at all



                }
                $scope.applnformdata = newEle;
            }).catch(function (data) {
                console.log("access not allowed");
            });
    }

and I have some entries coming from mssql which have "label name" and checkbox values . How can I make this part to generate dynamically ? Like if 10 entried come then 10 data will be shown , if 5 then 5 and so on ? Please help.

i havent tried anything as i cant figure out what to write itself. this is new for me thats why. i tried google but nothing proper . sorry for my bad english — Shalini Raj, Apr 05 '18 at 07:15
this isnt a code writing service unfortunately, and you need to look at the help section to what makes a good question. ideally you need to try something yourself, if then it doesnt work because you have errrors and issues then we can help you. Almost every issue is different so we cant predict what you need which is why we need you to try things — Simon Price, Apr 05 '18 at 07:17
@SimonPrice can you please tell me atleast how to generate div element in angularjs ? — Shalini Raj, Apr 05 '18 at 07:19
https://www.google.co.uk/search?q=how+to+create+div+dynamically+in+angularjs&oq=how+to+generate+div+dynamically+in+angular&aqs=chrome.4.69i57j69i60l3j0l2.12410j0j7&sourceid=chrome&ie=UTF-8 — Simon Price, Apr 05 '18 at 07:22
what's your backend? PHP? something else? then, how do you want to generate your _divs_? you can show them as they are, but populate them with some data from mySql database. and example would be: `$http.get("getData.php").then(function(response){$scope.model = response.data;}, function(error){...})` and to show the data from your controller: `{{model.label}}` — Aleksey Solovey, Apr 05 '18 at 08:19
@AlekseySolovey when I try to create div like the one above it prints "< label class='form_lable' >First Name" in the div element. Also the checkbox is not made. Please help — Shalini Raj, Apr 05 '18 at 09:58
@SimonPrice I have updated the code . please have a look and suggest. Thanks. — Shalini Raj, Apr 05 '18 at 10:04
@ShaliniRaj I think that's just syntax error, change `< label >` and `` to `` and ``. But how are you planning to detect any changes to the checkbox? — Aleksey Solovey, Apr 05 '18 at 10:20
@AlekseySolovey Thanks for the suggestion. I tried as per your suggestion and label works but not the checkbox.. newEle += "
"; — Shalini Raj, Apr 05 '18 at 10:26
@ShaliniRaj you can use [`$sce.trustAsHtml(newEle)`](https://docs.angularjs.org/api/ng/service/$sce#trustAsHtml) for the checkbox and styles. But clicking the checkbox won't do anything without `ng-model`, which requires you to compile the code differently (perhaps with a [directive and `$compile`](https://stackoverflow.com/a/24563545/8495123)) — Aleksey Solovey, Apr 05 '18 at 10:29
@AlekseySolovey $sce.trustAsHtml(newEle) just removes everything. whatever is even coming. I've included angular-sanitize.js as well. — Shalini Raj, Apr 05 '18 at 10:35
@ShaliniRaj have you **injected** `ngSanitize` into a module and `$sce` into a controller? — Aleksey Solovey, Apr 05 '18 at 10:37
i've given like this "" in cshtml page as reference and included $sce in js controller. — Shalini Raj, Apr 05 '18 at 10:42

score 0 · Accepted Answer · answered Apr 17 '18 at 08:58

Rather than appending the "div" and using default jquery checkbox, made own switch and used it.

<div class="row">
                        <div class="form-group col-lg-6" ng-repeat="x in apform">
                            <div class="col-lg-6">
                                <label class="form_lable">{{x.fieldName}}</label>
                            </div>
                            <div class="col-lg-6" align="right">
                                <label class="switch">
                                    <input id="{{x.id}}" class="switch-input" type="checkbox" ng-model="x.fieldOption" ng-click="check(x.id)" />
                                    <span id="data_{{x.id}}" class="switch-label" data-on="" data-off=""></span>
                                    <span class="switch-handle"></span>
                                </label>
                            </div>

                        </div>
                    </div>

How to generate DIV dynamically from Sql data from server in AngularJS file?

1 Answers1