ng-grid how to show/hide button in a column cell for last row

Question

I have a ng-grid table and one of the column Defs has a cell template to show icon. Currently icon shows up across all rows.

Can anyone help me how to display icon for the last row in ng-grid.

I tried using ng-show='$last' and didn't work.

$scope.reasonsGrid = { 
         data: 'myReasons',                    
        columnDefs: [
            {field: 'add', displayName:'', cellTemplate: addTemplate,enableCellEdit: false,width:30},
          {field: 'code', displayName: 'Reasons',cellTemplate: dropdownTemplate,enableCellEdit: false}]
        };

var addTemplate ='span class="glyphicon glyphicon-plus-sign" ng-click="addItem(row.rowIndex)" ng-show="$last"/>';;

Answer 1

Try this code:

  var ctpl = '<div ng-show="row.rowIndex==myData.length-1" class="ngCellText"><button ng-click="addItem()"">Add Item</button></div>';

  $scope.gridOptions = {
    data: 'myData',
    enableRowSelection:false,
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      field: 'age',
      displayName: 'Age',
    }, {
      displayName: 'Action',
      cellTemplate: ctpl
    }]
  };

  $scope.addItem=function(){
    $scope.myData.push({name:'new',age:''});
  }

See it working here

Answer 2

Try this sample out...use ng-show for hiding and showing

Working Demo

var myapp = angular.module('myapp', [ 'ngGrid' ]);
myapp.controller('MyCtrl', function($scope)
{
    $scope.editableInPopup = '<button id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" >Edit</button> '

    $scope.edit = function edit(row)
    {
        console.log("Here I need to know which button was selected " + row.entity.name)
    }

    $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 : [ {
            field : 'name',
            displayName : 'Name'
        }, {
            field : 'age',
            displayName : 'Age',
            editableCellTemplate : self.editableCellTempate,
            enableCellEdit : true
        }, {
            displayName : 'Popup',
            cellTemplate : $scope.editableInPopup
        } ]
    };
});

Answer 3

You can use $index also.. Use ng-show/ng-hide and put the condiltion $index== $last.