Question

我有一个有data-ng-grid的angularjs应用程序。默认情况下，此表自动显示1行，最后一列显示“删除”＃39;按钮，但由于此表必须包含1个或多个条目，我想在其中只有一行时删除/禁用此按钮。

我尝试添加ng-if="propertyIncomeGrid.count > 1"但是当我点击我的添加按钮时，它不会显示在任何一行上。

请注意，用户可以删除任何行，因此只要表格行为> 1，就会显示该按钮，并在<= 1时删除/禁用该按钮。

代码

$scope.propertyIncomeGrid = {
     data: 'propertyIncomeData',
     enableColumnReordering: false,
     rowHeight: 40,
     multiSelect: false,
     showColumnMenu: false,
     showFooter: false,
     enableColumnResize: true,
     filterOptions: $scope.filterOptions,
     selectedItems: $scope.mySelections,
     enablePaging: false,
     plugins: [gridLayoutPlugin],         
     columnDefs:
     [
          { field: 'PropertyTransactionType', displayName: 'Income type', width: '18%', enableCellEdit: false, cellTemplate: incomeDropdownTemplate },
          { field: 'leaseId', displayName: 'Property ID and lease name', width: '30%', enableCellEdit: false, cellTemplate: leaseDropdownTemplate },
          { field: 'propertyId', displayName: 'propertyId', width: '0', editableCellTemplate: '' },
          { field: 'netAmount', displayName: 'Net (£)', width: '14%', cellTemplate: AmountCellTemplate },
          { field: 'vatAmount', displayName: 'VAT (£)', width: '14%', cellTemplate: AmountCellTemplate },
          { field: 'GROSSAmount', displayName: 'Gross (£)', width: '14%', cellTemplate: AmountCellTemplate },
          {
               field: 'removeBtn', displayName: 'Actions',
               enableCellEdit: false,
               cellTemplate: '<button class="btn btn-warning ng-if="propertyIncomeGrid.count > 1"  ng-click="propertyIncomeRemoveRow(row.entity)" style="margin-top: 3px; margin-right: 0px; margin-left: 0px;">Remove</button>',
               width: '10%'
          },
     ]
};

我已经尝试过调试，它只会在我的模态加载时返回并返回undefined。

Answer 1

在我的按钮中添加了以下内容并且像魔术一样：

ng-disabled="propertyIncomeData != undefined && propertyIncomeData.length < 2"

完整按钮代码

cellTemplate: '<button class="btn btn-warning" ng-disabled="propertyIncomeData != undefined && propertyIncomeData.length < 2" ng-click="propertyIncomeRemoveRow(row.entity)" style="margin-top: 3px; margin-right: 0px; margin-left: 0px;">Remove</button>',

显示/隐藏/禁用A＆＃39;删除＆＃39; NG网格上的按钮

1 个答案: