我有一个联系表单,在提交时,它会向后端文件发送一个 POST:
<div class="field text-center">
<button type="submit" class="submit form-btn" ng-disabled="contactForm.$invalid">Send</button>
</div>
帖子:
$scope.processForm = function() {
$http({
method : 'POST',
url : '/php/contact.php',
data : $.param($scope.contactData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
}).then(function successCallback(response) {
}, function errorCallback(response) {
});
}
我想在函数 POST 成功时和出现错误时更改按钮的颜色和文本。我的猜测是,在成功和错误回调函数中我必须更新 DOM,但我该怎么做呢?或者有更好/更简单的方法吗?
最佳答案
您可以使用 ngStyle
更改 Controller 中 DOM 元素的样式。
HTML:
<div class="field text-center">
<button ng-style="httpCall" type="submit" class="submit form-btn" ng-disabled="contactForm.$invalid">{{httpCallText}}</button>
</div>
JS:
$scope.processForm = function() {
$http({
method : 'POST',
url : '/php/contact.php',
data : $.param($scope.contactData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
}).then(function successCallback(response) {
var buttonColor = "green";
$scope.httpCallText = "Success";
$scope.httpCall = {
'background-color': buttonColor
}
}, function errorCallback(response) {
var buttonColor = "red";
$scope.httpCallText = "Error";
$scope.httpCall = {
'background-color': buttonColor
}
});
}
如果您对此答案有任何疑问,请告诉我!
关于javascript - 在 POST AngularJS 上更改按钮样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34805752/