birdus birdus - 24 days ago 8
AngularJS Question

How to remove angularjs filter on table?

I'm generating a table of values using ng-repeat and have a text box I'm using to filter that list. That's working fine.

I also have a small "x" image after the text box where the user can click to remove the text they typed for filtering. When they click the "x", I want to clear the text box and restore the full list of items, unfiltered. Clicking the "x" clears the text box, but the list then disappears completely, rather than being restored to its full, unfiltered state. What's the trick? Here's my code:

<table id="tblGroups">
<tr>
<td>
<input ng-model="f.Name" />
<a href=""><img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" ng-click="f.Name = null" /></a>
</td>
</tr>
<tr ng-repeat="g in groups | filter:f">
<td>
<label><input type="checkbox" id="{{g.Name}}" ng-click="onClickSearchCriteriaCheckbox()" ng-model="selected[m.Name]" />{{g.Name}}</label>
</td>
</tr>
</table>

Answer Source

Instead of setting f.name to null set it to a blank string like so.

Before:

<a href=""><img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" alt="delete"
 ng-click="f.Name = null" /></a>

After:

<a href=""><img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" alt="delete"
 ng-click="f.Name = ''" /></a>

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.groups = [{
    Name: 1
  }, {
    Name: 2
  }, {
    Name: 3
  }, {
    Name: 4
  }, {
    Name: 5
  }, {
    Name: 6
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <table id="tblGroups">
    <tr>
      <td>
        <input ng-model="f.Name" />
        <a href=""><img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" alt="delete" ng-click="f.Name = ''" /></a>
      </td>
    </tr>
    <tr ng-repeat="g in groups | filter:f">
      <td>
        <label>
          <input type="checkbox" id="{{g.Name}}" ng-click="onClickSearchCriteriaCheckbox()" ng-model="selected[m.Name]" />{{g.Name}}</label>
      </td>
    </tr>
  </table>
</div>