ngを使ってng repeatを非表示にする方法

Question

私は自分のオートコンプリートを持っていますので、実際のオートコンプリートのように提案を表示するにはng repeatを使用し、テキストボックスの値を変更するにはクリックを使用します。クリックやテキストボックスの値は提案と同じですが、この提案は消えませんでした。このコードではどうすれば使用できますか？これはHTMLのための私のコード です：

<input type="text" class="form-control" data-ng-model="add.email" id="exampleInputEmail2" placeholder="Email" autocomplete="off"/> 
<div href="#" ng-repeat="x in cobas | filter:add.email" ng-click="autocomplete(x.name)" ng-if="isDisplayed"> 
<div class="media-body" ng-if="add.email.length > 0"> 
    <h5 class="list-group-item media">{{x.name}} 
</div> 
</div> 

と私のコントローラ：

$scope.cobas = [ 
    {name:'John', age:25, gender:'boy'}, 
    {name:'Jessie', age:30, gender:'girl'}, 
    {name:'Johanna', age:28, gender:'girl'}, 
    {name:'Joy', age:15, gender:'girl'}, 
    {name:'Mary', age:28, gender:'girl'}, 
    {name:'Peter', age:95, gender:'boy'}, 
    {name:'Sebastian', age:50, gender:'boy'}, 
    {name:'Erika', age:27, gender:'girl'}, 
    {name:'Patrick', age:40, gender:'boy'}, 
    {name:'Samantha', age:60, gender:'girl'} 
]; 

$scope.autocomplete = function (completeText){ 
    $scope.add.email = completeText; 
}; 

Answer 1

ジャスト入力の値がドロップダウンリストの値に等しいかどうかを確認するために、余分なチェックを使用します。

ng-if="add.email.length > 0 && add.email != x.name"

Answer 2

私はそれのためにカスタムフィルタを作成しますとngのリピート内NG-場合は使用しないでください。 私はこのフィルタをこのロジックを置くのに適していると思います。

例えば、それは、このようなことができます：

angular.module('myApp',[]).filter('myFilter', function(){  
    return function(items, filter){ 
     if(!filter) return items; 

     var arrayToReturn = []; 
     filter = filter.toLowerCase(); 
     angular.forEach(items, function(item) { 
      var name = item.name.toLowerCase(); 
      if(!filter || name.substring(0, filter.length) === filter && name !== filter) 
       arrayToReturn.push(item); 
     }); 

     return arrayToReturn; 
    }; 
}); 

Demo