[英]Disable button after click in angularjs
I created a generic dialog box directive which I am using to display forms like create, edit, delete etc.. 我创建了一个通用对话框指令,用于显示诸如创建,编辑,删除等表格。
It works perfectly but now I need to disable "create" button unless I receive a response from web services. 它工作正常,但是现在除非我收到Web服务的响应,否则我需要禁用“创建”按钮。 It sounds very easy but the way I created this directive it looks very difficult.
听起来非常简单,但是我创建此指令的方式看起来非常困难。
Here is the plunkcer - http://plnkr.co/edit/Iecm2V3eDBkAYsSoXF9e 这里是plunkcer - http://plnkr.co/edit/Iecm2V3eDBkAYsSoXF9e
angular.module('productApp', []) .controller("createProduct", function($scope, $timeout) { $scope.status = "loading"; $scope.createProduct = function () { var newProduct = { 'Title': $scope.Name }; //datacontext.createProduct(newProduct) // .then(function (data) { // location.path("/categories/" + data.data.CategoryID + "/products/" + data.data.ID, false); // window.location.reload(); // }) // .finally(function () { // $scope.$close(); // }); setTimeout(function(){ alert("product saved"); }, 10000); } }) .directive("dlg", function() { return { transclude: true, templateUrl: 'dialog.html', scope: { dlgTitle: '@dlgTitle', dlgPosText: '@dlgPosText', dlgPosClick: '&dlgPosClick', dlgIsValid: '=dlgIsValid' }, link: function (scope, element, attrs) { scope.dlgNegClick = function (e) { $(".modal").click(); e.stopPropagation(); }; } } });
<!DOCTYPE html> <html ng-app="productApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div ng-controller="createProduct"> <form role="form" name="productForm" dlg dlg-title="Create Product" dlg-pos-text="Create" dlg-pos-click="createProduct()" dlg-is-valid="productForm.$valid"> <div class="listrow"> <span class="listrow_label">Name</span> <span>: </span> <span class="listrow_value"> <input type="text" name="Name" data-ng-model="vm.Name" class="listrow_value" data-ng-required="true" style="width: 339px"></span> <span data-ng-show="productForm.Name.$invalid" class="val-hl">*</span> </div> </form> </div> </body> </html> // dialog html <html> <head></head> <body> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" data-ng-click="dlgNegClick($event)"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">{{ dlgTitle }} </h4> </div> <div class="modal-body"> <div ng-transclude=""></div> </div> <div class="modal-footer"> <button type="button" class="btn thememainbg text-white" data-ng-disabled="!dlgIsValid" data-ng-click="dlgPosClick($event)"> {{ dlgPosText }} </button> </div> </body> </html>
I changed your code, Please check once 我更改了您的代码,请检查一次
angular.module('productApp', [])
.controller("createProduct", function($scope, $timeout) {
$scope.status = "loading";
$scope.isUploading = false;
$scope.createProduct = function () {
$scope.isUploading = true;
var newProduct = { 'Title': $scope.Name };
//datacontext.createProduct(newProduct)
// .then(function (data) {
// location.path("/categories/" + data.data.CategoryID + "/products/" + data.data.ID, false);
// window.location.reload();
// })
// .finally(function () {
// $scope.$close();
// });
setTimeout(function(){ alert("product saved"); $scope.isUploading = false;}, 10000);
}
})
.directive("dlg", function() {
return {
transclude: true,
templateUrl: 'dialog.html',
scope: {
dlgTitle: '@dlgTitle',
dlgPosText: '@dlgPosText',
dlgPosClick: '&dlgPosClick',
dlgIsValid: '=dlgIsValid'
},
link: function (scope, element, attrs) {
scope.dlgNegClick = function (e) {
$(".modal").click();
e.stopPropagation();
};
}
}
});
Html code: HTML代码:
<!DOCTYPE html>
<html ng-app="productApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="createProduct">
<form role="form" name="productForm" dlg dlg-title="Create Product" dlg-pos-text="Create" dlg-pos-click="createProduct()" dlg-is-valid="productForm.$valid">
<div class="listrow">
<span class="listrow_label">Name</span>
<span>: </span>
<span class="listrow_value">
<input type="text" name="Name" data-ng-model="vm.Name" class="listrow_value" data-ng-required="true" style="width: 339px"></span>
<span data-ng-show="productForm.Name.$invalid" class="val-hl">*</span>
</div>
<button type="button" ng-click="createProduct()" ng-disabled="isUploading">{{isUploading?"Uploading":"upload"}}
</form>
</div>
</body>
</html>
http://plnkr.co/edit/8qiGMmeKk60EWzmKa3gj?p=preview http://plnkr.co/edit/8qiGMmeKk60EWzmKa3gj?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.