My autocomplete feature is set up using ng-repeat to display suggestions and ng-click to change the textbox value. However, I am facing an issue where the suggestion does not disappear when the textbox value is already the same as the suggestion. How can I implement ng-if in this code? Here is the HTML code snippet:
<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>
And here is my controller:
$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;
};