如何隱藏ng重複ng如果

Question

因此，我有我自己的自動完成，我用ng重複顯示建議，使它像一個真正的自動完成，我用ng單擊更改文本框的值，但當我點擊或者文本框的值與建議一樣，這個建議並沒有消失。如果在此代碼中如何使用ng？這是我的代碼爲 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