無法使用angular.js在視圖部件上綁定html數據

Question

我需要使用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>

控制器：

$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在控制台中具有以下輸出：

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

我無法在視圖上顯示以上HTML輸出。

Answer 1

在您的控制器中，將response.data綁定到范圍變量。 使其更清楚：

在您的控制器中：

$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) {

    });

在您的html中使用

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

在循環中，它將使用循環運行的次數創建與響應數據一樣多的體