如何从AngularJS文件中的服务器的Sql数据动态生成DIV?

时间:2018-04-05 07:10:59

标签: html angularjs

我必须根据来自以下区域的mssql服务器的数据添加元素:

    <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>

(抱歉,如果我留下任何结束div标签)。

点击按钮我正在调用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");
            });
    }

我有一些来自mssql的条目,它们有“标签名称”和复选框值。如何使这部分动态生成?如果10委托来了那么将显示10个数据,如果是5然后是5,依此类推?请帮忙。

1 个答案:

答案 0 :(得分:0)

而不是附加&#34; div&#34;并使用默认的jquery复选框,自己开关并使用它。

<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>