javascript - 选择所有行无法与复选框一起正常工作

Question

我正在使用智能表作为我的 GridView 。我用这个Select All Row指令来实现我的目的。它在给定的 plunker 中工作得很好。但在我的项目中却遇到了一些问题。当我第一次单击“全选”复选框时，它会选择所有行。然后我可以通过再次单击全选复选框来取消全选。但之后，当我尝试使用该复选框选择所有行时，我无法选择。有什么问题吗？我已经检查了 $scope.selected，i 包含选定的行 oid。但为什么我无法检查？

我的全选指令

'use strict';

define(['app'], function (app) {

    var rowSelectAllDirective = function () {
        return {
              require: '^stTable',
                template: '<input type="checkbox">',
                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('selected', function(newVal) {

                    var s = newVal.length;
                    var a = scope.all.length;

                    if ((s == a) && s > 0 && a > 0) {

                      element.find('input').attr('checked', true);
                      scope.isAllSelected = false;

                    } else {

                      element.find('input').attr('checked', false);
                      scope.isAllSelected = true;

                    }

                  });
                }
    }
    };
    app.directive('rowSelectAll', [rowSelectAllDirective]);

});

选择单行指令，

'use strict';

define(['app'], function (app) {

    var rowSelectDirective = function () {
        return {
             require: '^stTable',
                template: '<input type="checkbox" id="chk"><label for="chk">',
                scope: {
                    row: '=rowSelect'
                },
                link: function (scope, element, attr, ctrl) {

                  element.bind('click', function (evt) {

                    scope.$apply(function () {

                        ctrl.select(scope.row, 'multiple');

                    });

                  });

                  scope.$watch('row.isSelected', function (newValue) {

                    if (newValue === true) {

                        element.parent().addClass('st-selected');
                        element.find('input').attr('checked', true);

                    } else {

                        element.parent().removeClass('st-selected');
                        element.find('input').attr('checked', false);

                    }
                  });
                }
    }
    };
    app.directive('rowSelect', [rowSelectDirective]);

});

在我的 Controller 中:

$scope.selectAll = function (collection) {

                // if there are no items in the 'selected' array, 
                // push all elements to 'selected'
                if ( $scope.selected.length === 0) {

                  angular.forEach(collection, function(val) {

                      $scope.selected.push(val.oid); 

                  });

                // if there are items in the 'selected' array, 
                // add only those that ar not
                } else if ( $scope.selected.length > 0 &&  $scope.selected.length !=  $scope.displayedCollection.length) {

                  angular.forEach(collection, function(val) {

                    var found =  $scope.selected.indexOf(val.oid);

                    if(found == -1)  $scope.selected.push(val.oid);

                  });

                // Otherwise, remove all items
                } else  {

                     $scope.selected = [];

                }

              };


              $scope.select = function(oid) {

                    var found = $scope.selected.indexOf(oid);

                    if(found == -1) $scope.selected.push(oid);

                    else $scope.selected.splice(found, 1);

                  };

HTML:

<table st-table="displayedCollection" class="table table-striped smartTableFont"  st-safe-src="rowCollection">
       <thead>
        <tr>
         <th row-select-all="displayedCollection"  selected="selected" ng-click="selectAll(displayedCollection)"></th> 
         <th  st-sort="partnerName" class="text-left">Partner Name</th>
        </tr>

       </thead>
       <tbody>
        <tr ng-repeat="row in displayedCollection | limitTo : itemsByPage" >
          <td row-select="row" ng-click="select(row.oid)" ></td>
         <td class="text-left" width="25%">{{row.partnerName}}</td>


        </tr>
       </tbody>
</table>

Answer 1

你应该改变

element.find('input').attr('checked', true);

至

 element.find('input').prop('checked', true);