Tukukkk

I'm trying to update button value on-click based $http responses. I want to change button value to Processing... while making $http request with ng-click function. And based on Success/Error response, need to update text Success and Try Again etc.

I'm using ui-router and I've different form elements distributed in different states, e.g. Email, User, Password etc.

In my View, I've following code in Email State.

<div ng-controller="RegisterEmailController">

  <div class="form-group" style="position: relative;" ng-class="{ 'has-error': form.useremail.$dirty && form.useremail.$error.required && form.useremail.$invalid }">

    <input type="email" name="useremail" id="useremail" ng-model="RegisterEmailController.userDetail.useremail" ng-required="true">

    <span ng-show="form.useremail.$dirty && form.useremail.$error.required" class="help-block text-sm text-danger pl-4">Oops! Incorrect email address, or field is empty</span>

    <span ng-hide="form.useremail.$dirty && form.useremail.$error.required" class="help-block d-block text-sm text-danger px-4">{{ErrorMsg}}</span>

  </div>

  <button type="button" ng-click="RegisterEmailController.nexStep()">{{buttonTxt}}</button>

</div>

In my Controller

var controller = this;

$scope.buttonTxt = 'Next Step';



controller.nexStep = function() {

  $scope.buttonTxt = 'Processing...';

  if ( validation_conditions ) {

    $http({

      method: "POST",

      url: ApiURL,

      headers: { "Content-Type": "application/json" },

      data: getData

    }).then(function success(response) {

      $scope.buttonTxt = 'Success';

    }, function error(response) {

      $scope.buttonTxt = 'Try Again';

      return;

    });

  } else {

    $scope.buttonTxt = 'Try Again';

    return;

  }

}

With above code i can't be able to change button text on click, i tried with controller.buttonTxt as well but it doesn't print value at all on init. I also tried ng-bind directive but no luck.

Please assist me where I'm doing wrong. As far as i can estimate that $scope might conflicting with this (var controller = this;) in controller.

Also how can i add success/error class to input parent element based on response?

Thanks for reading my query and i appreciate your help in advance.

Try this

var controller = function ($http) {

  var validation_conditions

  var ApiURL = 'google.com'

  var getData = ''

  this.buttonTxt = 'Next Step';

  

  this.nexStep = function() {

    this.buttonTxt = 'Processing...';

    if ( validation_conditions ) {

      $http({

        method: "POST",

        url: ApiURL,

        headers: { "Content-Type": "application/json" },

        data: getData

      }).then(function success(response) {

        this.buttonTxt = 'Success';

      }, function error(response) {

        this.buttonTxt = 'Try Again';

        return;

      });

    } else {

      this.buttonTxt = 'Try Again';

      return;

    }

  }

}

controller.$inject = ['$http']



angular

  .module('app', )

  .controller('RegisterEmailController',controller);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="RegisterEmailController as ctrl">

  <div class="form-group" style="position: relative;" ng-class="{ 'has-error': form.useremail.$dirty && form.useremail.$error.required && form.useremail.$invalid }">

    <input type="email" name="useremail" id="useremail" ng-model="RegisterEmailController.userDetail.useremail" ng-required="true">

    <span ng-show="form.useremail.$dirty && form.useremail.$error.required" class="help-block text-sm text-danger pl-4">Oops! Incorrect email address, or field is empty</span>

    <span ng-hide="form.useremail.$dirty && form.useremail.$error.required" class="help-block d-block text-sm text-danger px-4">{{ctrl.ErrorMsg}}</span>

  </div>

  <button type="button" ng-click="ctrl.nexStep()">{{ctrl.buttonTxt}}</button>

</div>

Try to use:

<div ng-controller="RegisterEmailController as $registerEmail">

and then in button:

<button type="button" ng-click="RegisterEmailController.nexStep()">{{$registerEmail.buttonTxt}}</button>