我正在与大学项目一起工作。我有带有弹簧靴和AngularJS前端的REST API工作。这是我的工作部分。
homeservice.js
this.getDeviceList = function getDeviceList(){
return $http.get(REST_SERVICE_URI + '/get_device_list')
}
this.getPeripheralList = function getPeripheralList(dev_hard_id){
return $http.get(REST_SERVICE_URI + '/get_peripherals/?dev_hard_id=' + dev_hard_id)
}
homecontroller.js
中的工作功能$scope.getDeviceList = function () {
HomeService.getDeviceList()
.then (function success(response){
$scope.details = response.data;
$scope.errorMessage = '';
},
function error(response){
$scope.errorMessage = 'Error occured!!!';
$scope.message = response.data.message;
});
}
$scope.getPeripheralList = function (devHardwareId){
HomeService.getPeripheralList(devHardwareId)
.then (function success(response){
$scope.peripheralDetails = response.data;
$scope.errorMessage = '';
},
function error(response) {
$scope.errorMessage = 'Error occured!!!';
$scope.message = response.data.message;
});
}
HTML文件中的工作原始表。
<div class="panel-heading">
Logged in user: <b th:inline="text"> [[${#httpServletRequest.remoteUser}]] </b>
<br>
<span class="lead">Devices</span></div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Device Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in details track by d.devHardwareId">
<td>{{d.deviceName}}</td>
<td align="right"><button type="button" ng-click="getPeripheralList(d.devHardwareId)" class="btn btn-success custom-width">Attached Devices</button></td>
</tr>
</tbody>
</table>
</div>
</div>
上面的代码运行良好。但是我的要求是,我需要选择一排,当时我需要为特定设备调用getPeripheralList(d.devHardwareId)
功能。为此,我正在使用UI-Grid。
所以我在homecontroller.js
中添加了功能$scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };
$scope.gridOptions.columnDefs = [
{ name: 'Device HardwareId' },
{ name: 'Device Name'},
{ name: 'Device Ip Address'},
{ name: 'Attached Cameras' }
];
$scope.gridOptions.multiSelect = false;
$scope.gridOptions.modifierKeysToMultiSelect = false;
$scope.gridOptions.noUnselect = true;
$scope.gridOptions.onRegisterApi = function( gridApi ) {
$scope.gridApi = gridApi;
};
$scope.toggleRowSelection = function() {
$scope.gridApi.selection.clearSelectedRows();
$scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
};
$scope.deviceGrid = {
data: 'details',
};
也更改了HTML页面..
<button type="button" class="btn btn-success" ng-click="toggleRowSelection()">Toggle rowSelection</button>
<strong>rowSelection:</strong>
<span ng-bind="gridApi.grid.options.enableRowSelection"></span>
<div ui-grid="deviceGrid" ui-grid-selection class="grid"></div>
,但这不如我所期望的。它允许选择我不想做的多行,我不知道如何使用UI-Grid调用getPeripheralList(d.devHardwareId)
函数。(每当我选择一排我想在上面的方法上调用(,所以我希望从这里得到某人的帮助。
如果您不想允许在网格中选择多个行,则只需在网格中配置它:
$scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false, multiSelect:false };
如果选择一行时要调用功能,则必须注册gridapi并使用它,可以执行以下操作:
$scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false, multiSelect:false,
onRegisterApi: function (gridApi) {
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
// Your call to your function goes here
});
}};
这是答案
$scope.deviceGrid = {
data:'details',
enableRowSelection: true,
enableRowHeaderSelection: false,
enableSelectAll: false,
multiSelect: false,
noUnselect: true,
onRegisterApi: function (gridApi) {
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
var msg = 'row selected ' + row.isSelected;
console.log(row.entity.devHardwareId);
HomeService.getPeripheralList(row.entity.devHardwareId).then (function success(response){
$scope.peripheralDetails = response.data;
$scope.errorMessage = '';
},
function error(response) {
$scope.errorMessage = 'Error occured!!!';
$scope.message = response.data.message;
});
});
}};