如何在角度js表中启用多行选择

我创建了html表并使用ng-repeat来显示表中的项目,但我不能在表中选择多行.如何通过使用控制键来实现这一点谢谢!

    

        

            
#
            
Description
            
Ali
            
 Extension
            
 Ext/th>
            
Comp
        
    
    

        

            
{{$index}}
            


                {{docType.Desc}}
            
            
{{docType.LI}}
            
{{docType.Ext}}
            
{{docType.EXT}}
            
{{docType.Comp}}
        
    

我希望这对你来说还不算太晚,我有你回答.

您可以使用$ event.ctrlKey参数来检查用户是否按下了控件.

更好的是,有一个$ event.shiftKey参数来检查是否按下了shift.

你可以这样使用它(我让一个简单的控制器中的所有逻辑,以便它更容易理解,但我建议你把它放在服务中).此外,我选择仅存储行索引,但它与完整行的工作方式相同.

HTML

AngularJS

var selectedRowsIndexes = [];
$scope.rows = [{name: 'Happy Butterfly'}, {name: 'Wonderful Bee'}];


$scope.selectRow = function(event, rowIndex) {
  if(event.ctrlKey) {
      changeSelectionStatus(rowIndex);
  } else if(event.shiftKey) {
      selectWithShift(rowIndex);
  } else {
      selectedRowsIndexes = [rowIndex];
  }
  console.log(selectedRowsIndexes);
  console.log(getSelectedRows());
  console.log(getFirstSelectedRow());
};

function selectWithShift(rowIndex) {
  var lastSelectedRowIndexInSelectedRowsList = selectedRowsIndexes.length - 1;
  var lastSelectedRowIndex = selectedRowsIndexes[lastSelectedRowIndexInSelectedRowsList];
  var selectFromIndex = Math.min(rowIndex, lastSelectedRowIndex);
  var selectToIndex = Math.max(rowIndex, lastSelectedRowIndex);
  selectRows(selectFromIndex, selectToIndex);
}

function getSelectedRows() {
  var selectedRows = [];
  angular.forEach(selectedRowsIndexes, function(rowIndex) {
    selectedRows.push($scope.rows[rowIndex]);
  });
  return selectedRows;
}

function getFirstSelectedRow() {
  var firstSelectedRowIndex = selectedRowsIndexes[0];
  return $scope.rows[firstSelectedRowIndex];
}

function selectRows(selectFromIndex, selectToIndex) {
  for(var rowToSelect = selectFromIndex; rowToSelect <= selectToIndex; rowToSelect++) {
    select(rowToSelect);
  }
}

function changeSelectionStatus(rowIndex) {
  if($scope.isRowSelected(rowIndex)) {
      unselect(rowIndex);
  } else {
      select(rowIndex);
  }
}

function select(rowIndex) {
  if(!$scope.isRowSelected(rowIndex)) {
      selectedRowsIndexes.push(rowIndex)
  }
}

function unselect(rowIndex) {
  var rowIndexInSelectedRowsList = selectedRowsIndexes.indexOf(rowIndex);
  var unselectOnlyOneRow = 1;
  selectedRowsIndexes.splice(rowIndexInSelectedRowsList, unselectOnlyOneRow);
}

function resetSelection() {
  selectedRowsIndexes = [];
}

$scope.isRowSelected = function(rowIndex) {
  return selectedRowsIndexes.indexOf(rowIndex) > -1;
};

});

最后,如果你想使用强大的表,我建议你使用ng-table.

如果您使用ng-table,请务必添加

$scope.$on('ngTableAfterReloadData', function() {
  resetSelection();
});

并用$ scope.tableParams.data [rowIndex]替换$ scope.rows [rowIndex]

在此示例中,我尝试检测选择了哪一行,因此我将selectedparam 添加到已选择的每个对象,然后我们可以$filter用来检测选定的行.

var app = angular.module("app", []);
app.controller("ctrl", function($scope, $filter) {
  $scope.users = [{
    name: "x"
  }, {
    name: "y"
  }, {
    name: "z"
  }];
  
  $scope.selectedRows = [];

  $scope.select = function(item) {
    item.selected ? item.selected = false : item.selected = true;
  }

  $scope.getAllSelectedRows = function() {
    var selectedRows = $filter("filter")($scope.users, {
      selected: true
    }, true);
    
    $scope.selectedRows = selectedRows;
  }

});

body {
  padding-top: 50px;
}

tr td {
  cursor: pointer
}

tr.selected td {
  background: #ccc!important;
}

  

    

    Get All Selected Rows
    
    {{selectedRows | json}}