【发布时间】：2015-01-31 14:54:41
【问题描述】：
我正在尝试使用在 ng-grid 实体（行）之间导航 网格具有分组时的下一个和上一个按钮。这是我的 HTML 代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<button ng-click="goNext()">Next</button>
<button ng-click="goPrevious()">Previous</button>
</body>
</html>
JS：
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
var selectedRowIdx=-1;
$scope.nav = false;
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Moroni", age: 53},
{name: "Moroni", age: 54},
{name: "Tiancum", age: 44},
{name: "Tiancum", age: 45},
{name: "Moroni", age: 51},
{name: "Moroni", age: 52},
{name: "Jacob", age: 28}];
$scope.gridOptions = {
data: 'myData',
multiSelect: false,
groups: ['name'],
showGroupPanel: true,
groupsCollapsedByDefault: false,
beforeSelectionChange:function(row,evt){
console.log('before');
return true;
},
afterSelectionChange: function(row, event) {
console.log('after');
if ($scope.nav){
$scope.nav = false;
return;
}
if (row.selected){
console.log(row);
console.log($scope.nav);
selectedRowIdx = row.rowIndex;
//console.log(selectedRowIdx);
}
}
};
$scope.count = 0;
//ngGridEventData gets emitted after all functions in watch for data changes
$scope.selectEnosRow = function() {
angular.forEach($scope.myData, function(data, index) {
if (data.name == 'Enos') {
$scope.gridOptions.selectItem(index, true);
}
})
};
$scope.goPrevious = function(){
$scope.nav = true;
$scope.gridOptions.selectItem(selectedRowIdx - 1, true);
};
$scope.goNext = function(){
$scope.nav = true;
$scope.gridOptions.selectRow(selectedRowIdx + 1, true);
};
});
当我点击下一个/上一个动作时出现问题， 而不是选择组内的实际下一个项目-> 正在选择网格配置中的下一个元素！
我创建了 plunker 来演示我的问题：http://plnkr.co/edit/sk6xme6aXDvQoB3yZ21M?p=preview
要查看问题，请单击第一组中的第一项，然后单击 next()..
【问题讨论】：
标签： javascript angularjs events navigation grouping