在AngularJS

Question

嘿伙计们，所以我试图使用自定义指令在我的复选框列表顶部实现一个selectall复选框，我已经引用了这个帖子：https://github.com/lorenzofox3/Smart-Table/issues/270

到目前为止，我收到一条错误消息，指出TypeError：无法读取属性＆＃39; forEach＆＃39;未定义的。如果有人可以帮我解决这个问题，我将非常感激。感谢

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

我认为您不需要create-react-app，只需all。尝试完全删除该手表。我在Smart Table上使用相同的指令，但我没有看isAllSelected。您还需要添加一项检查以确保所有内容都存在：

all

此外，您应该复制原始数组以用于表格上的scope.$watch('isAllSelected', function() { if(scope.all) { scope.all.forEach(function (val) { val.isSelected = scope.isAllSelected; } } }); 属性。然后使用原始数组作为指令。

st-safe-src

然后改变你的观点。

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

Answer 2

 <plugin>
  <groupId>com.spotify</groupId>
  <artifactId>docker-maven-plugin</artifactId>
  <version>VERSION GOES HERE</version>
  <configuration>
    [...]
    <serverId>docker-hub</serverId>
    <registryUrl>https://index.docker.io/v1/</registryUrl>
  </configuration>
</plugin>

脚本

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

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

享受。它已经过测试，但随时可以询问它是否已损坏或您有疑问。

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文件中，内部表头使用你的指令并为其分配表集合，即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 = [];
        }
    };