Question

我试图利用ngGrid。该列表表示用户随后可以选择（或不选择）的一组项目。此选择应保持不变，因此当用户返回时，网格显示与上次相同的所选项目。 I made a plunker

但是我使用ngGrid遇到了一些问题。

我使用afterSelectionChange将选择更改保存到网格中。

$scope.gridOptions = { 
  data: 'myData',
  showSelectionCheckbox: true,
  afterSelectionChange: function(rowItem, event) {
    // $http... save selection state
  }
};

哪个好。但是当我想在页面加载时以编程方式选择行时，所有地狱都会松动。下面的代码应该选择名为Enos的行，它确实如此。但它会触发afterSelectionChange 4次。

$scope.$on('ngGridEventData', function() {
    angular.forEach($scope.myData, function(data, index) {
        if (data.name == 'Enos') {
            $scope.gridOptions.selectItem(index, true);
        }
    });
});

这不是故意的。 I made a plunker。

如何使用ngGrid保留选定的行？

Answer 1

不知道为什么会激活4次，但是当你使用selectedItems时它不会发生：

$scope.gridOptions = { 
  data: 'myData',
  showSelectionCheckbox: true,
  selectedItems:$scope.output
};

不是一个真正的答案，但也许它可以帮到你。

Forked Plunker

<强>更新找到了更多：

事件ngGridEventData被触发2次：

关于初始化和观察者selectItem之后。
同样afterSelectionChange被解雇2次。第一次调用的rowItem是一个克隆（来自缓存？），第二个是noClone。

总计最多4个！

因此，从ngGridEventdata中取出init并将其替换为超时，以及仅当它们是克隆时才推送rowitems（为什么？）解决了这个问题。

    $scope.gridOptions = {
    data: 'myData',
    showSelectionCheckbox: true,
    afterSelectionChange: function(rowItem, event) {
      if (rowItem.isClone) {
        $scope.output.push({
          name: rowItem.entity.name,
          selected: rowItem.selected
        });
        $scope.num++;
      }
    }
    };
    setTimeout(function() {
    angular.forEach($scope.myData, function(data, index) {
      if (data.name == 'Enos') {
        $scope.gridOptions.selectItem(index, true);
      }
    });
    })

我知道这仍然不是一个答案，对我来说闻起来像个臭虫，但无论如何这里是另一个分叉的Plunker。

当然，您现在必须找到一种方法，在取消选择时，如何将项目拼接出数组。祝你好运！

Answer 2

我想出来了 - 或者说。

使用beforeSelectionChange代替afterSelectionChange我得到了预期的行为。文档滞后一些信息。

以正确的方式保持选定的行

2 个答案: