Ways to conceal ng repeat using ng if

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

Answer №1

To determine compatibility, always verify whether the text entered matches the selection made in the dropdown menu.

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

Answer №2

To improve efficiency, I recommend creating a custom filter instead of using ng-if within ng-repeat. Placing this logic in a filter is a more organized approach.

Here is an example implementation:

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;
    };
});

Check out the demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the table is clicked, a dynamic accordion table should appear

My current code displays a table inside another table using a PHP for loop. While I can retrieve the data successfully, I'm facing issues with the UI layout and accordion functionality. The inner table is displaying beside the outer table instead of b ...

How about beginning a JavaScript count with a randomly generated number?

As I work on developing this code, I am faced with a challenge: /** * Increment value with random intervals. * @param {string} id - Id of DOM Element. * @param {number} start - Start counter value. Applied immediately- * @param {number} end - End c ...

React - a search feature for array filtering

Lately, I've been delving into the intricacies of implementing a live search input that interacts with an array to create a file tree. Here is where you can find all the code: https://codesandbox.io/s/815p3k3vkj Although the solution seemed straightf ...

Discover the nodes with the highest connections in a D3 Force Graph

As I explore the functionalities of a D3 Force Directed Graph with zoom and pan features, I encounter an issue due to my limited knowledge of d3.js. Is there a way to estimate the number of links for each node in this scenario? I am currently at a loss on ...

Obtain Outcome from a Nested Function in Node.js

I'm grappling with the concept of manipulating the stack in JS and hoping this exercise will provide some clarity. Currently, I'm attempting to create a function that makes a SOAP XML call, parses the data, and returns it when called. While I c ...

Having issues with displaying options in Select2 within a Vue Component?

I have successfully created a Vue component that generates options for a select dropdown as shown below: <select ref="subdomain_id" name="subdomain_id" id="newEvidenceSubdomain" class="form-control" :class=&qu ...

navigation menu 'selective emphasis' feature

I have created a JQuery script that will highlight the 'About', 'My Projects', or 'Contact Me' text on the navigation bar when the corresponding section of the page is in view. To achieve this, I am using a scroll() event list ...

Efficiently transferring data in segments within an HTML table using jQuery

My HTML code looks like this: <table id="library_info_tbl"> <thead> <th>Call No.</th> <th>Book</th> <th>Accession No.</th> <th>Status</th> </thead> <tbody& ...

What is the process to activate strict mode for my entire package without applying it to dependencies?

Previously, I would always start my JavaScript files with "use strict"; to enable the strict mode. However, I am now faced with the task of applying this change to over 200 files in my NodeJS package, which seems like a daunting process. Is there a way to ...

The compilation of the Apache Cordova project in Visual Studio 2013 did not produce the expected release APK file

Yesterday, I successfully generated an APK release file for my VS2013 Cordova application in the bin/release folder. However, when I tried to build the APK file today, the bin/release folder is empty. I selected the release configuration, Android platfor ...

Sharing data across multiple paths

route.post('/register',function(req,res){ //completed registration process // token value assigned as 'abc' }) route.post('/verify',function(req,res){ // How can I retrieve the token ('abc') here? }) I' ...

decipher the string using various operators

Is it possible to explode a string using different operators? I am trying to extract every code (of varying sizes) between the brackets [ and ] Here are some examples of the different possibilities: const codes = [ '[5018902847][592][50189272809] ...

Using aliases in npm packages is not supported

I am working on creating an npm package that I want to use in another application. During development, I set a path in tsconfig for importing various modules instead of using a relative path. However, when I download my package into the test app, it is una ...

Strange interaction observed when working with Record<string, unknown> compared to Record<string, any>

Recently, I came across this interesting function: function fn(param: Record<string, unknown>) { //... } x({ hello: "world" }); // Everything runs smoothly x(["hi"]); // Error -> Index signature for type 'string' i ...

Tips for redirecting in the callback of a jQuery post request

After receiving data, my homepage does not redirect to the login page. Below is the JavaScript code for the homepage: $(function(){ const submit = $('#submit'); const save = $('#save'); const email = $('#email'); ...

Prevent scrolling in AngularJS model popups

When loading data for the first time in a model popup, the scroll bar is not displayed inside the popup. However, after performing a search function and filtering the data, the scroll bar appears inside the model popup. How can this issue be fixed? this ...

Is it possible to set the radius of a d3.js circle using a style attribute?

Learn more about styling in d3.js with this detailed guide that explains how style attributes can be leveraged to customize the look of a circle, including fill color, stroke color, and stroke width. Is it possible to adjust the radius of a d3.js circle u ...

Terminating a function during execution in JavaScript/TypeScript

Currently, I am in the process of developing a VSCODE extension using TypeScript. Within this extension, there is a particularly large function that is frequently called, but only the final call holds significance. As a solution, I am attempting to elimina ...

Using Protractor, streamline the process of testing file uploads by automating them with the 'ngf-select' button

I am currently using the 'ngf-select' directive along with 'ng-img-crop' to handle image uploads. Instead of an input element, I have a button below specifically for uploading images. <button class="btn-prof-upload" ngf-select ng-c ...

Empty placeholder image appearing at the beginning of JavaScript slideshow in Ruby on Rails

As a newcomer, I ask for your understanding if I lack knowledge in some areas. I have been working on a project and using the cycle2 plugin successfully to create a slideshow on my index page with images pulled from the internet. Now, I am trying to impl ...