如何使用AngularJS，AJAX和XML在提交後添加新行

Question

我是AngularJS的新手，我試圖從JQuery轉換爲Angular。我知道我在.success中使用JQuery片段，但我非常懷疑它會起作用，但是這應該讓你知道我正在嘗試做什麼。我似乎無法弄清楚如何在表單提交後向表格添加新行。我試圖不斷添加新的表格，但沒有任何效果。如果你知道一個好的，簡單的剪輯開始，它將不勝感激。下面的代碼我到目前爲止：

HTML：

<table id="tblLogEntry"> 
       <tr id="tableheadings"> 
        <th class="dateCol dateSize">Date</th> 
        <th class="trainingCol">Training</th> 
        <th class="successCol successSize">Success?</th> 
       </tr> 
      </table> 

角：

var logApp = angular.module('logApp', []); 

logApp.controller('logController', ['$scope', '$http', function($scope, $http) { 

    $scope.statuses = [ 
     {value:'Yes'}, 
     {value:'No'} 
    ]; 

    $scope.logData = {}; 

    $scope.processLog = function(isValid) { 

     if (isValid) {    
      $scope.isProcessing = true; 
      $http({ 
       method: 'POST', 
       url: 'LogEntryFile.php', 
       data: $.param($scope.logData), 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
      }) 
        .success(function(data) { 
         var parser = new DOMParser(); 
         var parsedXML = parser.parseFromString(data, "text/xml"); 
         var today = parsedXML.getElementsByTagName("today")[0].childNodes[0].nodeValue; 
         var log = parsedXML.getElementsByTagName("log")[0].childNodes[0].nodeValue; 
         var status = parsedXML.getElementsByTagName("status")[0].childNodes[0].nodeValue; 
         $('#tableheadings').after('<tr>\n\ 
          <td>' + {{ logData.today }} + '</td>\n\ 
          <td>' + {{ logData.log }} + '</td>\n\ 
          <td>' + {{ logData.status }} + '</td></tr>'); 
      }); 
     } 

    }; 

    $scope.clearFields = function() { 
     $scope.logData = ""; 
    }; 

}]); 

LogEntryFile.php：

$log = new Log(); 

$log->dateoflog = $_POST["today"]; 
$log->training = $_POST["log"]; 
$log->success = $_POST["status"]; 

$isLogValid = $log->validateLog(); 

if ($isLogValid) {  
    insertLog($log->dateoflog, $log->training, $log->success); 

echo ('<logentry>' 
     . '<today>' . $log->dateoflog . '</today>' 
     . '<log>' . $log->training . '</log>' 
     . '<status>' . $log->success . '</status>' 
     . '</logentry>'); 
} else { 
    header("Location: index.php"); 
} 

Answer 1

使用AngularJS ng-repeat指令：

<table id="tblLogEntry"> 
    <tr id="tableheadings"> 
     <th class="dateCol dateSize">Date</th> 
     <th class="trainingCol">Training</th> 
     <th class="successCol successSize">Success?</th> 
    </tr> 
    <tr ng-repeat="row in rowArray"> 
     <td>{{row.today}}</td> 
     <td>{{row.log}}</td> 
     <td>{{row.status}}</td> 
    </tr>   
</table> 

ng-repeat指令將編譯並向DOM中添加一行，用於數組中的每個行對象rowArray。