AngularJS:提交按钮需要点击两次才能工作

AngularJS: Submit button requires two clicks to work

本文关键字：两次 工作 提交 按钮 AngularJS      更新时间：2023-09-26

我的表单上有一个提交按钮但是由于一些奇怪的原因它要求我在调用保存函数之前点击两次按钮下面，我使用Pug作为我的HTML

这是我的HTML模板: 
<form ng-submit="save()">
  <div class="form-group">
    <div class="row">
      <div class="col col-md-6">
        <ol ng-model="service.category" title="Select a category" class="nya-bs-select">
          <li nya-bs-option="category in categories.rows" class="nya-bs-option"><a> <span>{{category.name}} </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
        </ol>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col col-md-6">
        <div class="input-group"><span class="input-group-addon">Service Name</span>
          <input type="text" ng-model="service.name" class="form-control"/>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col col-md-6">
        <textarea ng-model="service.description" placeholder="Service Description" rows="10" class="form-control"></textarea>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col col-md-6">
        <button type="submit" value="Save" class="btn btn-default"> Save</button>
      </div>
    </div>
  </div>
</form>

所调用的保存函数为

angular.module('App.controllers')
.controller('UpdateServiceCtrl', [
  '$scope', '$state', 'ServicesService', 'Notification',
function ($scope, $state, ServicesService, Notification) {
  $scope.service = $scope.$parent.service;
  $scope.categories = $scope.$parent.categories;
   /**
   * Edits a service
   * @param  {integer} serviceID Id of the service to be edited
   * @return {undefined}           Does not return any values
   */
  $scope.save = function () {
    $scope.service.category_id = $scope.service.category.id;
    ServicesService.save($scope.service, $scope.service.id)
    .then(function (result) {
      $state.reload();
    })
  }
}]);

您可以在第一次使用后禁用提交按钮ng-disabled='isButtonEnabled'你的html。像这样修改你的保存

$scope.save = function () {
$scope.isButtonEnabled = false; 
    $scope.service.category_id = $scope.service.category.id;
    ServicesService.save($scope.service, $scope.service.id)
    .then(function (result) {
      $state.reload();
    })
  }

相关文章：