无法使用angular.js绑定视图部件上的html数据

I need to bind some HTML part into the view using angular.js.

我需要使用angular.js将一些HTML部分绑定到视图中。

time.html:

<table class="table table-bordered table-striped table-hover" id="dataTable">
  <tr>
    <td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i>
      <BR>Day <i class="fa fa-long-arrow-down"></i>
    </td>
    <td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour.time_slot"></td>
  </tr>
  <tbody id="detailsstockid" >
   //Here my data will bind
  </tbody>
</table>

controller:

$http({
        method:'POST',
        url:"php/hodtime/getTimeTableData.php",
        data:userdata,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
        console.log('response',response);
        $("#detailsstockid").html(response.data);
    },function errorCallback(response) {

    });

response.data has the this output in the console:

response.data在控制台中有这个输出:

<tr>
     <td width="100" align="center" style=" vertical-align:middle">Monday</td>
      <td width="100" align="center" style="padding:0px;">
           <table style="margin:0px; padding:0px; width:100%">
                 <tr>
                    <td><input type="text" name="itemname" id="coursemname" class="form-control" placeholder="Add sub name" readonly value="Mechanics of Solids" id="30"  ></td>
                 </tr>
                 <tr>
                     <td><input type="text" name="itemname"  class="form-control" placeholder="Add fac name" readonly value="" id=""  ></td>
                  </tr>
              </td>
              </table>
              </td>
              <td width="100" align="center" style="padding:0px;" >
                  <table style="margin:0px; padding:0px; width:100%">                        
                     <tr>
                        <td> <input type="text" name="itemname" id="coursemname" class="form-control" placeholder="Add sub name" readonly value="Engineering Materials" id="31"  ></td>
                     </tr>
                     <tr>
                        <td><input type="text" name="itemname"  class="form-control" placeholder="Add fac name" readonly value="" id=""  ></td>
                     </tr>
              </td>

I can not display the above HTML output on my view.

我无法在我的视图上显示上面的HTML输出。

1 个解决方案

#1

In your controller bind the response.data to a scope variable. to make it clearer:

在您的控制器中,将response.data绑定到范围变量。使它更清楚:

In your controller:

在你的控制器中:

$http({
        method:'POST',
        url:"php/hodtime/getTimeTableData.php",
        data:userdata,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
        console.log('response',response);
        $scope.variableName = response.data;
    },function errorCallback(response) {

    });

In your html use

在你的HTML使用中

<tbody ng-bind-html="variableName"></html>

In the loop it will create as many tbody with the response data as many times the loop will run

在循环中,它将使用响应数据创建尽可能多的tbody,循环将运行多次

#1