Question

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

总而言之，我希望在单击“提交”按钮时禁用“提交”和“关闭”按钮。如果点击“关闭”按钮，因为“提交”按钮已被禁用，我不会感到烦恼。

我是否需要向控制器添加代码？如果可以的话，请你帮我解决一下，因为我似乎找不到谷歌的起点。

由于

Answer 1

这是一个例子...... 将此代码放入.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>

Answer 2

简而言之，您需要拥有一个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会导致伪造值）并且还原，所以最好将此功能放在控制器中：

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

Answer 3

您的提交和关闭按钮无法观看单个范围变量，例如下面的“提交”：

<button ng-disabled="submit" ng-click="submit=true">Submit</button>
<button ng-disabled="submit">close</button>

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

3 个答案: