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

Question

我正在尝试更新基于单击的$ http响应的按钮值。 我想通过ng-click函数发出$ http请求时将按钮值更改为Processing...。 并且基于成功/错误响应，需要更新文本成功和重试等。

我正在使用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 ，但它在init上根本不输出值。 我也尝试了ng-bind指令，但是没有运气。

如果我做错了，请帮助我。 据我估计， $scope可能与this控制器中的此变量（var controller = this;）冲突。

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

感谢您阅读我的查询，也非常感谢您的帮助。

Answer 1

尝试使用：

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

然后在按钮中：

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

Answer 2

尝试这个

 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>