Question

所以我有自己的自动完成功能，我使用重复显示建议，使其像真正的自动完成，我使用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-repeat内使用ng-if。我认为过滤器是放置这种逻辑的好地方。

例如它可能是这样的：

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

如何隐藏ng重复ng

2 个答案: