以正确的方式保留所选行

Question

我正在尝试使用ngGrid。该列表表示用户可以选择（或不选择）的一组项目。这个选择应该持久化，这样当用户返回时，网格显示与上次相同的所选项目。我做了一个灌篮

然而，我在使用ngGrid时遇到了一些问题。

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

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

这很好。然而，当我想在页面加载时以编程方式选择行时，一切都会变得一团糟。下面的代码应该选择名为Enos的行，它确实选择了。但它触发CCD_ 2 4次。

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

这不是故意的。我做了一个灌篮。

如何使用ngGrid持久化选定的行？

Answer 1

不知道为什么会触发4次，但当您使用selectedItems:时不会发生这种情况

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

不是一个真正的答案，但也许它对你有帮助。

叉式Plunker

更新发现更多：

事件ngGridEventData触发2次：

1. 由观察程序在selectItem之后初始化AND时。

2. afterSelectionChange也被激发2次。第一个调用中的rowItem是克隆（来自缓存？），第二个调用是noClone。

总共4个！

因此，通过从ngGridEventdata中取出init并将其替换为超时，以及仅在行项目是克隆时推送行项目（为什么？）解决了这个问题。

    $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，我得到了预期的行为。文档滞后于某些信息。