Select AngularJS 中智能表格的所有复选框

Question

大家好，我正在尝试使用自定义指令在我的复选框列表顶部实现一个 selectall 复选框，我已经参考了这个线程来这样做：https://github.com/lorenzofox3/Smart-Table/issues/270

到目前为止，我收到一条错误消息，提示类型错误：无法读取未定义的属性 'forEach'。如果有人可以帮助我解决这个问题，我将不胜感激。谢谢

我的html:

<div class="row">
      <div class="col-md-12">
        <table id="document-table" st-table="documents" class="table">
          <thead>
            <tr>
              <th>
                <st-select-all all="yourDisplayedCollection"></st-select-all>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="document in documents">
              <td><input type="checkbox" ng-model="checkedDocument"/></td>
            </tr>
          </tbody>
         </table>
      </div>
    </div>

我的指令：

.directive('stSelectAll', function () {
        return {
            restrict: 'E',
            template: '<input type="checkbox" ng-model="isAllSelected" />',
            scope: {
            all: '='
            },
            link: function (scope, element, attr) {

            scope.$watch('isAllSelected', function () {
                scope.all.forEach(function (val) {
                val.isSelected = scope.isAllSelected;
                })
            });

            scope.$watch('all', function (newVal, oldVal) {
                if (oldVal) {
                oldVal.forEach(function (val) {
                    val.isSelected = false;
                });
                }

                scope.isAllSelected = false;
            });
            }
        }
        });

Answer 1

 all  <input type="checkbox" ng-click="ctrl.toggleAll(ctrl.all)" ng-model="ctrl.all">
 a    <input type="checkbox" ng-model="ctrl.checks.alpha" ng-value="allChecked">
 b    <input type="checkbox" ng-model="ctrl.checks.beta" ng-value="allChecked">

脚本

function MyController() {
    this.data = [
        {title: 'a', data: [1,2,3]},
        {title: 'b', data: [4,5,6]},
        {title: 'c', data: [7,8,9]}
    ];

    let ctrl = this;

    ctrl.checks = {
       alpha: false,
       beta: false
    };

    ctrl.toggleAll = function(toggle) {
        for (let check in ctrl.checks) {
            ctrl.checks[check] = toggle;
        }
   };
   return this;
}
angular.module('test').controller('MyController',MyController);

在此实现中，所有子复选框都将采用父复选框的状态。而不是简单地切换子复选框的先前状态。

尽情享受吧。它已经过测试，但如果它坏了或您有任何疑问，请随时询问。

Answer 2

我认为你不需要看 all，只需 isAllSelected。尝试完全移除该手表。我对 Smart Table 使用相同的指令，但我不看 all。您还想添加一个检查以确保所有内容都存在：

scope.$watch('isAllSelected', function() {
  if(scope.all) {
    scope.all.forEach(function (val) {
      val.isSelected = scope.isAllSelected;
    }
  }
});

此外，您应该复制原始数组以用于 table 上的 st-safe-src 属性。然后将原始数组用于您的指令。

// in your controller (not in your directive)
$scope.yourDisplayedCollection = [].concat($scope.documents);

那就换个角度吧。

<table id="document-table" st-table="documents" st-safe-src="yourDisplayedCollection" class="table">

<st-select-all all="documents"></st-select-all>

Answer 3

在您的 javascript 中，将指令修改为

function rowSelectAll() {
    return {
        require: '^stTable',
        $scope: {
            all: '=rowSelectAll',
            selected: '='
        },
        link: function (scope, element, attr) {
            $scope.isAllSelected = false;
            element.bind('click', function (evt) {
                $scope.$apply(function () {
                    $scope.all.forEach(function (val) {
                        val.isSelected = $scope.isAllSelected;
                    });
                });
            });

            $scope.$watchCollection('selectedItems', function(newVal) {
                var s = newVal.length;
                var a = ($scope.all !== undefined) ? $scope.all.length : 0;
                if ((s == a) && s > 0 && a > 0) {
                    element.find('input').prop('checked', true);
                    scope.isAllSelected = false;
                } else {
                    element.find('input').prop('checked', false);
                    $scope.isAllSelected = true;
                }
            });
        }
    };
}
app.directive('rowSelectAll', rowSelectAll);

并且在 HTML 文件中，在 table header 中使用你的指令并分配 table collection 即 displayedCollection 给它。

<th row-select-all="displayedCollection" selected-items="selected_items" ng-click="selectAll(displayedCollection)"><input type="checkbox" ng-disabled="displayedCollection.length == 0"></th>

如果要选择元素，请使用以下代码：

    $scope.selected_items = [];
    // Function to get data for all selected items
    $scope.selectAll = function (collection) {
        // if there are no items in the 'selected_items' array, push all elements to 'selected_items'.
        if ($scope.selected_items.length === 0) {
            angular.forEach(collection, function(val) {
                if (val.bank_flag) {
                    $scope.selected_items.push(val);
                }
          });

        // if there are items in the 'selected_items' array, add only those that are not.
        } else if ($scope.selected_items.length > 0 && $scope.selected_items.length != $scope.displayedCollection.length) {
            angular.forEach(collection, function(val) {

                var found = $scope.selected.indexOf(val);
                if(found == -1) {
                    $scope.selected_items.push(val);
                }

            });
        // Otherwise, reinitiate the variable.
        } else  {
            $scope.selected_items = [];
        }
    };

Select AngularJS 中智能表格的所有复选框

Select All Checkbox for Smart tables in AngularJS

javascript

checkbox

angularjs

smart-table