Angularjs 如何在角度上显示当前行索引和ng栅格？

这是我的专栏

$scope.communityColDef = [{ field: 'name', displayName: 'Name' },
                          { field: 'description', displayName: 'Description' }];

我的数据中没有索引号，但在网格中显示时，我希望使用行号显示它。

---

jqGrid中有一个设置行数的选项，但我在angularJS中找不到类似的功能。

在将数据设置为网格之前，在数据json中添加索引选项

代码

$scope.communityColDef = [{
    field: 'index',
    displayName: 'Sr. Number'
}, {
    field: 'name',
    displayName: 'Name'
}, {
    field: 'description',
    displayName: 'Description'
}];

$scope.items = data;
//adding index for showing serial number
angular.forEach($scope.items, function(item, index) {
    item.index = index + 1;
});
$scope.gridOptions.columnDefs = $scope.communityColDef;
$scope.gridOptions.data = $scope.items;

---

希望这能对您有所帮助。谢谢。

好的，我找到了一种方法，但它有多个问题。首先，它只是视觉上的，这意味着我没有显式地设置字段数据，也没有像前面的答案那样修改项目。此外，我不知道我的解决方案如何与不同的排序或其他ngTable函数交互

代码如下：

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];  
    $scope.gridOptions = { 
        data: 'myData',
        columnDefs: [
        {displayName:'#', cellTemplate: '<div>{{$parent.$index + 1}}</div>'},
        {field: 'name', displayName: 'Name'},
        {field:'age', displayName:'Age'}]
    };
});

var-app=angular.module（'myApp'，['ngGrid']）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.myData=[{name:“Moroni”，年龄：50}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}]；
$scope.gridOptions={
数据：“myData”，
columnDefs：[
{displayName:'#'，cellTemplate:'{{$parent.$index+1}}}，
{字段：'name'，显示名称：'name'}，
{字段：'age'，显示名称：'age'}]
};
});

这是一个纯粹的装饰性解决方案，行号一直添加到左侧的一个新列中，与jquery中的工作方式类似。这样做的好处是，您不必仅仅为了启用行号而修改数据或项目，而是会遇到我前面提到的问题

---

显示我的解决方案的plnkr。

您也可以在单元格模板中使用row.rowIndex。我修改了上面的内容

var-app=angular.module（'myApp'，['ngGrid']）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.myData=[{name:“Moroni”，年龄：50}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}]；
$scope.gridOptions={
数据：“myData”，
columnDefs：[
{displayName:'#'，cellTemplate:'{{row.rowIndex+1}}}，
{字段：'name'，显示名称：'name'}，
{字段：'age'，显示名称：'age'}]
};
});

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];  
    $scope.gridOptions = { 
        data: 'myData',
        columnDefs: [
        {displayName:'#', cellTemplate: '<div class="ngCellText" data-ng-class="col.colIndex()"><span>{{row.rowIndex + 1}}</span></div>'},
        {field: 'name', displayName: 'Name'},
        {field:'age', displayName:'Age'}]
    };
});