AngularJS在按键下更改多行选择ng-grid属性

标签 angularjs ng-grid

我的 View 中定义了以下网格

<div class="gridStyle hide" ng-grid="resultsOptions" id="resultsGrid"></div>

而且我只想在按下 ctrl 键时才允许 multiSelect 。所以我在Controller中将multiSelect属性定义为false。
$scope.resultsOptions = {
    data: 'searchData',
    selectedItems: $scope.mySelections,
    multiSelect: false,
    enableHighlighting: true,
    enableRowSelection: true
};

在同一个 Controller 中,我有以下代码将 multiSelect 设置为 true。
$("#resultsGrid").keydown(function (e) {
    if (e.ctrlKey) {
        $scope.resultsOptions.multiSelect = true;
        $scope.$apply();
    }
});

当我按下 ctrl 后启动应用程序 multiSelect 值会发生变化。但是我仍然无法进行多项选择。

我尝试对 multiSelect 使用变量,但它并没有改变任何事情。

以下示例也不会更改 multiSelect 属性。但它改变了网格标题。
http://plnkr.co/edit/RwYSG4?p=preview

有没有简单的解决方案?或者我的代码中遗漏了什么?

最佳答案

批准的“hacky”答案对我们来说不够干净,所以我们构建了一个更强大的版本,依赖于 beforeSelectionChange 上的事件参数而不是做讨厌的键绑定(bind)。
这也适用于您添加此事件回调的任何网格,因为它不需要引用任何特定的自定义 CSS 类或 ID,而只需使用可靠的 ng-grid 类。

beforeSelectionChange: function(rowItem, event){
    if(!event.ctrlKey && !event.shiftKey && $scope.multiSelect && 
        !$(event.srcElement).is(".ngSelectionCheckbox"))
    {
          angular.forEach($scope.myData, function(data, index){
              $scope.gridOptions.selectRow(index, false);
          });
    }
    return true;
}

这样做只是检查我们是否正在执行多选操作(按住 ctrl 键、shift 键或使用多选复选框),如果是,则让多选发生。
如果用户只是单击一行上的任何其他位置,并且多选处于事件状态,我们将删除所有当前选择,以便之后仅选择一个目标行。

关于AngularJS在按键下更改多行选择ng-grid属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19090613/

相关文章:

javascript - 使用 ng-transinclude 将作用域强制指定到命名槽

javascript - Angularjs Controller 与不同文件中的另一个 Controller 通信

javascript - angularjs ng-grid row 模板与启用单元格编辑冲突?

javascript - Angular JS 将多个数组传递给scope.list

node.js - Protractor 在 PhantomJS 上运行测试

javascript - AngularJs 从 JSON 对象中提取值并附加到 $scope

css - Angular ng-Grid 单元格文本溢出以添加单元格悬停菜单

javascript - Angular js 网格验证

javascript - Angular ng-grid中的弹出窗口不起作用

javascript - 当我使用异步/等待功能时,Angular UI 路由器不处理解析功能?