角度のUIグリッドは、行インデックスを持つ列を並べ替えることができません

Question

名前、価格などの列を持つグリッドがあります。このグリッドには、シリアル番号を示す別の列が追加されています。すなわち1,2,3 ...となる。これを生成するために、私はcellTemplateを使用しました： '{{rowRenderIndex + 1}}'

ここではシリアル番号でこの列に基づいてソートします。しかし、ソーティングは機能しません。私はタイプを追加しようとしました：列の定義に '番号'。シリアルナンバーの列にはソートが行われません。

はここ http://plnkr.co/edit/zgQKyaS7KbJeZoyzPLKf?p=preview

マイHTML

<div ng-controller="MainCtrl"> 
    <div id="grid1" ui-grid="gridOptions1" class="grid"></div> 
</div> 

私のJS = angular.module VARアプリ（ 'アプリ'、[ 'ngAnimate'、 'ngTouch'、「UI私のバイオリンのリンクです。グリッド']）;

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) { 
    $scope.gridOptions1 = { 
    enableSorting: true, 
    columnDefs: [ 
     { name: 'SL NO' ,cellTemplate: '<div>{{rowRenderIndex+1}}</div>', type:'number'}, 
     { field: 'name' }, 
     { field: 'gender' }, 
     { field: 'company', enableSorting: false } 
    ], 
    onRegisterApi: function(gridApi) { 
     $scope.grid1Api = gridApi; 
    } 
    }; 


$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json') 
    .success(function(data) { 
     $scope.gridOptions1.data = data; 
    }); 
}]); 

ここでは、行インデックスを含む名前SL NOの列をソートするとします。

Answer 1

最初に、rowRenderIndexはレンダリング後に行のインデックスを表示するため、並べ替えの目的には適していません。したがって、グリッドを下にスクロールすると、数値が自動的に調整されます。

第二に、あなたはあなたの行indecesを取得するにはIndexOfメソッドの機能を使用することができますが、それは文句を言わないの並べ替え問題を解決するため、ここで

// { name: 'SL NO' ,field:'index',cellTemplate: '<div class = "ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>', type:'number'}, 

は、最終的な作業コードスニペットです： - ここに

columnDefs: [ 
    {field:'index'}, 
    { field: 'name' }, 
    { field: 'gender' }, 
    { field: 'company', enableSorting: false } 
], 
onRegisterApi: function(gridApi) { 
    $scope.grid1Api = gridApi; 
} 
}; 
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json') 
.success(function(data) { 
    $scope.gridOptions1.data = data; 
    angular.forEach(data, function(data, index) { 
      data["index"] = index+1; 

ですplunkr：http://plnkr.co/edit/LiDWg8ozwdEo290xUqNe?p=preview