Question

我还是Angular的新手并且了解了ngGrid。我有一个基本的ng-grid，其中包含一些关于时间表的数据。我在网格底部有添加，编辑和删除按钮。

我想在加载网格时默认禁用“编辑”和“删除”按钮。

我想在选择ng-grid中的任何行时启用这些按钮。

我已经能够在HTML表格上实现此功能，但不是ng-grid。

这是我的HTML。

<div class="gridStyle" ng-grid="gridOptions"><!--ng-grid-->
 </div>
<table><!--HTML table-->
<thead>
 <tr>
  <th>Enabled</th>
  <th>Recurrence</th>
  <th>Type</th>
  <th>Protection</th>
  <th>Estimated Duration</th>
  <th>Priority</th>
  <th>Description</th>
 </tr>
</thead>
<tbody>
 <tr class="{{selectedClass(sched)}}" ng-click="selected($event,$index,sched)" ng-dblclick="openModal(sched)" ng-repeat="sched in scheduleData.scheduleList">
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
 </tr>
</tbody>
</table>
<button ng-click="openAddModal()">Add</button>
<button ng-click="openModal(getSelected())" ng-disabled="!singleSelection()">Edit</button>
<button ng-click="deleteSchedules()" ng-disabled="!somethingSelected()">Death to Schedules!</button>
<button ng-click="deleteAllSchedules()" ng-disabled="">Schedule Extermination!</button>

这是我的app.js

$scope.gridOptions = {
  data: 'scheduleData.scheduleList',
  columnDefs: [
               ...                    
  ],
  enableCellSelection: true,
  enableSorting: true,
  enableColumnResize: true,
  enableColumnReordering: true,
  showGroupPanel: true,
  showColumnMenu: true,
  showFilter: true,
  showFooter: true
};

我如何在ngGrid中实现相同的功能呢？

Answer 1

你需要做一些简单的事情......

将以下内容添加到gridOptions：

selectedItems: $scope.selections,
afterSelectionChange: function() {
    if($scope.selections != null){
        $scope.disabled = true;
    } else {
        $scope.disabled = false;
    }
 }

使用ng-disabled =＆＃34;禁用＆＃34;在你的元素上，并确保你开始设置$ scope.disabled = true。

以下是plunker以获得更好的解释

ng-grid如何启用“编辑”和“删除”按钮

1 个答案: