1

我正在尝试使用 Angular 实现复选框更改事件，但在单击复选框时看到该事件多次触发。

我为此创建了一个plnkr，请帮助。理想情况下，它应该只触发一次。

$scope.treeOptions = {
  checkboxes: {
    checkChildren: true
  },
  dataBound: function(e) {
    $scope.attachChangeEvent(e);

  }

};

事件变更代码：

 $scope.attachChangeEvent = function(e) {

  var dataSource = e.sender.dataSource;
  // issue : change event is getting called multiple times for every click on checkbox
  dataSource.bind("change", function(e) {
    var selectedNodes = 0;

    var checkedNodes = [];

    $scope.checkedNodeIds(dataSource.view(), checkedNodes);


    for (var i = 0; i < checkedNodes.length; i++) {
      var nd = checkedNodes[i];
      if (nd.checked) {
        selectedNodes++;
      }
    }
    // check the console - this is called multiple times for one checkbox click
    console.log(selectedNodes);
  });
};

是否有另一个事件要附加到所有复选框更新后只触发一个事件？或者也许有一种方法可以将所有这些“更改”事件分组并只触发一个？

4

1 回答 1

1

该dataBound事件被多次触发，因为您正在处理分层数据源（每个子 DS 都会触发该事件，并且它会冒泡）。结果，您将多次绑定更改处理程序。相反，您应该从您的initTree方法中绑定更改事件；片段：

var knobj = new kendo.data.HierarchicalDataSource({
    data: arrayObj
});

//setting heirarchial data to scope
$scope.treeObj = knobj;
$scope.attachChangeEvent();

（更新的演示）

或者，您可以使用dataBoundevent 和 check e.node，这显然undefined是最后一次触发 dataBound （demo）：

dataBound: function(e) {
    if (!e.node) {
        $scope.attachChangeEvent();
    }
}
于 2014-03-03T20:40:38.997 回答