时间戳

首页 > 解决方案 > angularjs 更新按钮文本基于 $http 响应 ng-click

javascript - angularjs 更新按钮文本基于 $http 响应 ng-click

问题描述

我正在尝试更新基于 $http 响应的单击按钮值。我想将按钮值更改为处理...同时使用 ng-click 功能发出 $http 请求。并且根据 Success/Error 响应，需要更新文本Success和Try Again等。

我正在使用ui-router，并且我有不同的表单元素分布在不同的状态，例如电子邮件、用户、密码等。

在我看来，我在电子邮件状态中遵循了代码。

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

在我的控制器中

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;
  }
}

使用上面的代码，我无法在单击时更改按钮文本，我也尝试过，controller.buttonTxt但它在初始化时根本不打印值。我也尝试了 ng-bind指令，但没有运气。

请在我做错的地方帮助我。据我估计，这$scope可能与控制器中的this(var controller = this;) 冲突。

另外，如何根据响应将成功/错误类添加到输入父元素？

感谢您阅读我的查询，我提前感谢您的帮助。

标签： javascriptangularjs

解决方案

尝试这个

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>

推荐阅读