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

若如初见. 提交于 2019-12-01 14:24:35

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!