ng-grid how to enable Edit and Delete buttons

问题

I am still new to Angular and learning about the ngGrid. I have a basic ng-grid with some data on schedules. I have Add, Edit and Delete buttons at the bottom of the grid.

I want to disable the Edit and Delete buttons by default when the grid is loaded.

I would like to enable those buttons when any row from the ng-grid is selected.

I have been able to implement this functionality on a HTML table, but not a ng-grid.

Here is my 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>

And here is my app.js

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

How would I go about implementing the same in ngGrid too?

回答1:

You will need to do a few simple things...

Add the following to your gridOptions:

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

Use ng-disabled="disabled" on your elements and make sure that you set $scope.disabled = true to begin with.

Here is a plunker for a better explanation

来源：https://stackoverflow.com/questions/20058477/ng-grid-how-to-enable-edit-and-delete-buttons

标签

angularjs

ng-grid