Angularjs 使用单元格模板管理ui网格中的添加和删除按钮

在网格中，“添加”按钮应仅在最后一条记录中显示

这是单元格模板中使用的代码

 cellTemplate: '<button class="btn primary" ng-click="grid.appScope.deleteRow(row)">Delete</button>'+
    '<button class="btn primary" ng-click="grid.appScope.addRow(row)">Add</button>'

cellTemplate:“删除”+
“添加”

扑通一声

在plunk中，所有行都有两个按钮，如何从除最后一行之外的所有行中删除“添加”按钮

---

我如何使用网格行长度来管理它呢？

如果您掌握了

gridApi

，如下所示：

$scope.gridOptions.onRegisterApi = function(gridApi){
    //set gridApi on scope
    $scope.gridApi = gridApi;
}

然后修改单元格模板中的“添加”按钮，使其具有以下内容：

ng-show="grid.appScope.isLast(row)"

并在作用域上定义

isLast

函数：

$scope.isLast = function(row) {
  return row.uid === $scope.gridApi.grid.renderContainers.body.visibleRowCache[$scope.gridApi.grid.renderContainers.body.visibleRowCache.length-1].uid;
}

此函数将当前行的

uid

与最后渲染行的

uid

进行比较，如果是最后一行，则返回true，否则返回false。

ng show

根据此函数返回的值呈现添加按钮

这将仅在最后一行显示“添加”按钮。在添加/删除行时，这也会起作用（添加按钮将保留在最后一行）：

---

请参见示例。

如果您掌握了

gridApi

，如下所示：

$scope.gridOptions.onRegisterApi = function(gridApi){
    //set gridApi on scope
    $scope.gridApi = gridApi;
}

然后修改单元格模板中的“添加”按钮，使其具有以下内容：

ng-show="grid.appScope.isLast(row)"

并在作用域上定义

isLast

函数：

$scope.isLast = function(row) {
  return row.uid === $scope.gridApi.grid.renderContainers.body.visibleRowCache[$scope.gridApi.grid.renderContainers.body.visibleRowCache.length-1].uid;
}

此函数将当前行的

uid

与最后渲染行的

uid

进行比较，如果是最后一行，则返回true，否则返回false。

ng show

根据此函数返回的值呈现添加按钮

这将仅在最后一行显示“添加”按钮。在添加/删除行时，这也会起作用（添加按钮将保留在最后一行）：

请看一个例子