AngularJS中的启用/禁用按钮答案

【问题标题】：Enable/Disable button in AngularJSAngularJS中的启用/禁用按钮
【发布时间】：2018-03-10 21:32:18
【问题描述】：

我有一个带有复选框的表格。它有一个 select ALL javascript 函数和一个 select one by one 函数。对于删除按钮，我的 html 文件如下所示：

<button data-toggle="modal" data-target="#rejectModal" contenteditable="false" id="delbutton" ng-model="delbutton" ng-disabled="countChecked() == 0">Delete</span></button>

全选复选框：

<th class="">
    <input type="checkbox" name="select" id="checkAll" ng-model="selectAllRawSCP"/>
</th>

表格详情：

<tr ng-repeat=" item in rawSCAP | orderBy:sort">
   <td>
        <input type="checkbox" name="select" value="checked" ng-model="item.checked"/>
    </td>

如果没有选中复选框，我使用了我在堆栈溢出中的一个答案中看到的代码来禁用删除按钮。它看起来像这样：

$scope.countChecked = function(){
            var count = 0;
            angular.forEach($scope.rawSCAP, function(value){
                if (value.checked) count++;
            });

            return count;
        }

但是使用这个，我的页面返回一个错误 isTypeError: Cannot read property 'checked' of null

即使我使用全选，我也需要启用删除按钮

【问题讨论】：

你能把plunker插在这里吗？
循环中$scope.rawSCAP的值是多少

标签： javascript html angularjs disabled-input

【解决方案1】：

错误很明显，它无法访问 rawSCAP 元素的 checked 属性。在尝试在 ng-model 中使用它之前，您必须保证 rawSCAP itens checked 属性不为空。

你可以尝试用你想要的一些值来初始化它。查看this 了解如何操作。

【讨论】：

【解决方案2】：

使用<<ng-model>>.checked需要满足一些条件，这是一个不能用于复选框的纯数组，它必须是一个array of objects强>。另外请将您的功能更改为以下。

  $scope.countChecked = function() {
    var count = 0;
    angular.forEach($scope.rawSCAP, function(value) {
        value.checked = value.checked || 0;
      if (value.checked) count++;
    });

    return count;
  }

完成这项工作的主线是value.checked = value.checked || 0; 这里如果value.checked 未定义，那么0 将被分配给value.checked，因此您不会收到错误消息！

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.rawSCAP = [{
    item: 1
  }, {
    item: 2
  }, {
    item: 3
  }, {
    item: 4
  }, {
    item: 5
  }, {
    item: 6
  }, {
    item: 7
  }];

  $scope.countChecked = function() {
    var count = 0;
    angular.forEach($scope.rawSCAP, function(value) {
    	value.checked = value.checked || 0;
      if (value.checked) count++;
    });

    return count;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <button data-toggle="modal" data-target="#rejectModal" contenteditable="false" id="delbutton" ng-model="delbutton" ng-disabled="countChecked() == 0">Delete</button>
  <table>
    <th class="">
      <input type="checkbox" name="select" id="checkAll" ng-model="selectAllRawSCP" />
    </th>
    <tr ng-repeat=" item in rawSCAP | orderBy:sort">
      <td>
        <input type="checkbox" name="select" value="checked" ng-model="item.checked" />{{item.item}}
      </td>
    </tr>
  </table>

</div>

【讨论】：

@bleykFaust 这个答案对你有帮助吗？