title: Dynamically hide rows in a ng-grid AngularJS
body: <p>I have declared a column called State as enum with 4 values: None (default value), Updated, New and Delete.</p>
  
  <p>I put a column button called "Acciones", when i click that button this call a event that change the value of State to "Delete", i want to hide that row when this happen but the filteroptions doesnt work.</p>
  
  <p>This is my code:</p>
  
  <pre><code>           $scope.stateCRUD = {
                 0: 'None',
                 1: 'New',
                 2: 'Delete',
                 3: 'Update' 
             };
  
             $scope.filterOptions = {
                 filterText: 'state:Delete',
                 useExternalFilter: true
             };
  
             $scope.gridOptionsDetailCurvaOriginal = {
  
                 data: 'detailCurvaOriginalList',
                 columnDefs: [
                     { field: 'objetoItem', displayName: 'Item', width:'130px', cellClass: 'grid-align', visible: false},
                     { field: 'ejercicio', displayName: 'Ejer', width: '12%', cellClass: 'grid-align', enableCellEdit: $scope.canEdit(), resizable: true },
                     { field: 'importe', displayName: 'Importe', width: '20%', cellClass: 'grid-align', enableCellEdit: $scope.canEdit() },
                     { field: 'state', displayName: 'State', width: '130px', cellClass: 'grid-align', visible: true },
                     { displayName: 'Acciones', width: '12%', cellClass: 'grid-align', cellTemplate: '&lt;div class="ng-grid-icon-container"&gt;&lt;a href="javascript:void(0)" class="btn btn-rounded btn-xs btn-icon btn-default" ng-click="DeleteItemCurvaOriginal(row)"&gt;&lt;i class="fa fa-close"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;' }
                 ],
                 showFooter: true,
                 enableRowSelection: true,
                 filterOptions: $scope.filterOptions,
                 multiSelect: false,
                 enableCellEditOnFocus: false,
                 selectedItems: $scope.mySelections,
                 totalServerItems: 'detailCurvaOriginalTotalItems',
                 beforeSelectionChange: function (data) { $scope.idRowSelectedCurvaOriginal = data.rowIndex; },
                 jqueryUITheme: false
             };
  
             $scope.DeleteItemCurvaOriginal = function (row) {
                 $scope.detailCurvaOriginalList[row.rowIndex].state = $scope.stateCRUD[2];
             };
  </code></pre>