Angular - ng grid select next/previous 语法分组的项目

Question

我正在尝试在 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);  
  };  

});

当我点击 next/previous 操作时出现问题，而不是选择组内的实际下一个项目 - > 正在选择网格配置中的下一个元素！

我创建了 plunker 来演示我的问题：http://plnkr.co/edit/sk6xme6aXDvQoB3yZ21M?p=preview

要查看问题，请单击第一组中的第一项，然后单击 next()..

Answer 1

http://plnkr.co/edit/mv4BGznmjhCb1faeWeZl?p=preview

我添加了一个初始化排序

sortInfo: {fields:['name'], directions:['desc']},

你在 goPrevious 中使用过

$scope.gridOptions.selectItem(selectedRowIdx - 1, true);

而不是

$scope.gridOptions.selectRow(selectedRowIdx - 1, true);

编辑：如果您需要排序后索引中数据中的索引，您可以使用此

$scope.gridOptions.ngGrid.rowMap.indexOf(selectedRowIdx);

Angular - ng grid select next/previous 语法分组的项目

Angular - ng grid select next/previous item grammatically with grouping

javascript

navigation

events

grouping

angularjs