[英]angular ui-grid event: row selected
I am trying to enable/disable a button based on the selection of a row on a ui-grid. 我正在尝试根据ui-grid上的行选择来启用/禁用按钮。 If there are no rows selected, the button is disabled.
如果未选择任何行,则禁用该按钮。
I found this plunkr with the old ng-grid way of firing an event after a row is selected. 我发现这个plunkr使用旧的ng-grid方式在选择一行后触发事件。
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.selections,
enableRowSelection: true,
afterSelectionChange:function() {
if ($scope.selections != "" ) {
$scope.disabled = false;
} else {
$scope.disabled = true;
}
}
};
Unfortunately it does not work, and I have found no sign of such event in the ui-grid documentation . 不幸的是它没有用,我在ui-grid 文档中没有发现这种事件的迹象。
How can I achieve that with ui-grid? 我如何用ui-grid实现这一目标?
In ui-grid, you register a callback function on the event "rowSelectionChanged" 在ui-grid中,您在事件“rowSelectionChanged”上注册一个回调函数
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, callbackFunction);
gridApi.selection.on.rowSelectionChangedBatch($scope, callbackFunction);
}
}
function callbackFunction(row) {
var msg = 'row selected ' + row.isSelected; $log.log(msg);
})
I think you should take a look at the tutorial page in ui-grid: http://ui-grid.info/docs/#/tutorial/210_selection . 我想你应该看一下ui-grid的教程页面: http : //ui-grid.info/docs/#/tutorial/210_selection 。 The API page sucks, in my opinion :(.
在我看来,API页面很糟糕:(。
you can first get all the records selected in the grid
currently by doing : 你可以通过以下方式首先获得在
grid
选择的所有记录:
$scope.rowsSelected = $scope.gridApi.selection.getSelectedRows();
now we can get the length of this array using : 现在我们可以使用以下方法获取此数组的长度:
$scope.countRows = $scope.rowsSelected.length;
based on $scope.countRows>0
or 0
you can enable or disable a button using 基于
$scope.countRows>0
或0
您可以使用启用或禁用按钮
ng-disabled = "countRows"
$scope.countRows=0;
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function(row){
$scope.countRows = $scope.gridApi.selection.getSelectedRows().length;
});
gridApi.selection.on.rowSelectionChangedBatch($scope, function(row){
$scope.countRows = $scope.gridApi.selection.getSelectedRows().length;
});
};
In the HTML side you can use some thing like this 在HTML方面,你可以使用这样的东西
<button class="custom-button" ng-disabled="countRows<=0" ng-click="submit()">Details</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.