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ディレクティブは、rowArrayという配列の各行オブジェクトの行をコンパイルしてDOMに追加します。