如何在提交后使用AngularJS、AJAX和XML向表中添加新行


How to add new row to table after submission using AngularJS, AJAX, and XML

我是AngularJS的新手,我正在尝试从JQuery转换到Angular。我知道我使用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");
}

使用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中。