Question

我有一个ng-grid表，其中一个列Defs有一个单元格模板来显示图标。目前，所有行都会显示图标。

任何人都可以帮助我如何显示ng-grid中最后一行的图标。

我尝试使用ng-show='$last'并且没有工作。

$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

尝试此示例...使用ng-show隐藏和显示

<强> 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 2

你也可以使用$ index .. 使用ng-show / ng-hide并将condiltion $ index == $ last。

Answer 3

试试这段代码：

  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

ng-grid如何显示/隐藏最后一行的列单元格中的按钮

3 个答案: