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"/>';;
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
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
} ]
};
});
You can use $index also..
Use ng-show/ng-hide and put the condiltion $index== $last.