使用 angularjs 单击一个按钮时禁用 2 个按钮

Disable 2 buttons when one is clicked using angularjs

本文关键字：按钮 一个 angularjs 单击 使用      更新时间：2023-09-26

我是angularJS的新手，正在处理一个有2个按钮的表单（提交和关闭）。

"提交"按钮有一个type="submit"，"关闭"按钮有一个type="button"。

我已经设法在单击时禁用了"提交"按钮，但我还需要禁用"关闭"按钮。

这是我坚持的一点。

还要指出的是，当表单打开直到填充所有必填字段之前，我的表单上的"提交"按钮是"禁用"。

所有这些目前都是在HTML中完成的。

.HTML

    <button ng-disabled="enterreminder.remtype.$invalid
                        || enterreminder.remother.$invalid
                        || enterreminder.remarea.$invalid
                        || enterreminder.remdate.$invalid
                        || enterreminder.remsubject.$invalid
                        || enterreminder.remnotes.$invalid"
            type="submit" class="btn btn-primary" ng-click="submit()" onclick="this.disabled=true;" title="Click to set the reminder.">
        Submit
    </button>
    <button type="button" class="btn btn-warning" ng-click="cancel()" title="Click cancel the reminder.">Close</button>
因此，总而言之，我希望在单击"提交"按钮时禁用"提交"

和"关闭"按钮。 如果单击"关闭"按钮，我不会感到困扰，因为"提交"按钮已被禁用。

我需要向控制器添加代码吗？ 如果是这样，你能帮我解决吗，因为我似乎无法从谷歌找到起点。

谢谢

简而言之，您需要有一个 ViewModel 属性来驱动所需的行为，并将其分配给每个按钮的 ng-disabled 指令：

<button type="submit" ng-disabled="commandButtonsDisabled"
        ng-click="submit(); commandButtonsDisabled = true">Submit</button>
<button type="button" ng-disabled="commandButtonsDisabled"
        ng-click="cancel()">Close</button>

这只是说明了这一点，但是将多个操作分配给ng-click并不是一个好的设计。上面的代码也没有显示$scope.commandButtonsDisabled是如何初始化的（尽管undefined会导致 falsy 值）并恢复，因此最好将此功能放在控制器中：

.controller("MyCtrl", function($scope, $http){
   $scope.commandButtonsDisabled = false;
   $scope.submit = function(){
      $scope.commandButtonsDisabled = true;
      $http.post(....)
         .success(...)
         .finally(function(){
             $scope.commandButtonsDisabled = false;
         }
   }
}
<button type="submit" ng-disabled="commandButtonsDisabled" ng-click="submit()">Submit</button>   
<button type="button" ng-disabled="commandButtonsDisabled" ng-click="cancel()">Close</button>

题外话：

似乎您有一堆表单元素，您也在测试其有效性。不要单独测试每个元素，而是使用表单的有效性：

<div ng-form="enterreminder">
   <input ng-model="remtype" ...>
   <input ng-model="remother" ...>
   ...
   <button type="submit" ng-disabled="enterreminder.$invalid || commandButtonsDisabled"...>Submit</button>
</div>

这里有一个例子...将此代码放入.js文件中

 var app = angular.module('plunker', []);
 app.controller('MainCtrl', function ($scope) {
    $scope.name = 'World';
    $scope.disable_buttons = false;
    $scope.submit = function () {
        $scope.disable_buttons = true;
    }
 });

在 HTML 中

  <button ng-disabled="disable_buttons"
                type="submit" ng-click="submit()" title="Click to set the reminder.">
            Submit
        </button>
        <button ng-disabled="disable_buttons" type="button" ng-click="cancel()" title="Click cancel the reminder.">Close</button>

提交和关闭按钮不能监视单个范围变量，例如下面的"提交"： 

<button ng-disabled="submit" ng-click="submit=true">Submit</button>
<button ng-disabled="submit">close</button>
相关文章：