Disable button after click in angularjs

Question

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. It sounds very easy but the way I created this directive it looks very difficult.

Here is the 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>

Ankit Kumar Gupta · Accepted Answer · 2017-04-05 07:49:28Z

0

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:

<!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

edited Apr 5, 2017 at 7:49

answered Apr 5, 2017 at 7:07

Ankit Kumar Gupta

1,3223 gold badges10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mathematics Over a year ago

Thanks ankit, but your example is not working for me

Mathematics Over a year ago

anikit, thank you, its changing is-upload back & forth now but its not actually disabling create button

Mathematics Over a year ago

Thanks ankit it is working but not the way I want it to work, if you see in my code I am using dialog as template and then injecting controller's options into it, but your latest example has a create button in form which is not something I want, I want to keep create button in directive so I can use it across different forms/controllers

Collectives™ on Stack Overflow

Disable button after click in angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related