テーブル上のangularjsフィルタを削除するには？

Question

私はng-repeatを使用して値のテーブルを生成しています。このリストをフィルタリングするために使用しているテキストボックスがあります。それはうまくいきます。

また、ユーザーがクリックしてフィルタリングするために入力したテキストをクリックすることができるテキストボックスの後に小さい「x」イメージが表示されます。 「x」をクリックすると、テキストボックスをクリアして、フィルタリングされていないアイテムの完全なリストを復元します。 "x"をクリックすると、テキストボックスはクリアされますが、リストはフィルタされていない完全な状態に復元されるのではなく、完全に消えます。トリックは何ですか？

<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 1

plunker https://plnkr.co/edit/TpESoPYENhYQoWuNrIFT?p=previewの代わりにそのような空の文字列にf.nameセット、それをnullに設定例を参照してみてください。ここに私のコードです。

前：

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

後：

<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>

Answer 2

が

ng-click="f.Name = undefined" 

が