0

我試圖使用角實現複選框更改事件,但單擊複選框時看到事件觸發多次。Angular - Kendo treeview複選框更改事件觸發多次

我爲此創建了一個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); 
    }); 
}; 

是否有其他事件附加到只生一個事件觸發的所有複選框被更新後?或者,也許有辦法將所有這些「變化」事件分組,然後只發射一個?

回答

1

dataBound事件被多次觸發,因爲您正在處理分層數據源(每個子DS都會觸發該事件,並且它會冒泡)。因此,您多次綁定更改處理程序。 您應該將initTree方法中的更改事件綁定;片段:

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

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

updated demo

或者,你可以使用dataBound事件,並檢查e.node,這顯然是undefined最後一次數據綁定被觸發(demo):

dataBound: function(e) { 
    if (!e.node) { 
     $scope.attachChangeEvent(); 
    } 
} 
+0

喜拉爾斯 - 感謝您的迴應。似乎還有更多的問題 - 刷新頁面三次調用附加事件,有時候事件會在做一些迭代後觸發兩次。 – Abhi

+0

我不確定你的意思 - 你可以改變演示來說明或給出重現步驟嗎?如果您檢查父級的所有子級,數據源更改事件將會觸發兩次 - 在這種情況下,父級會自動設置爲「已檢查」,從而觸發第二個事件 –

+0

好吧,我想我知道您的意思 - 樹視圖初始化時更改數據源,這會觸發更改事件;我添加了另一個替代我的答案 –

相關問題