我是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中。