Restricting data list values in AngularJS

Currently, I am facing a performance issue while trying to display approximately 2000 values retrieved through an API call using DataList in AngularJS. The page becomes extremely slow due to the large number of items being rendered. Is there a way to optimize this by rendering only 10 items at a time and implementing a feature that displays matching search results to a limit of 10 as we type?

For reference, here is the CodePen link: https://codepen.io/anon/pen/KyEXMr

<main ng-app="myApp">
  <section ng-controller="dataListController">
    <form name="some">
      <label> Search
   <input type="text" list="dataList">
      </label>
      <datalist id="dataList">
        <option ng-repeat="v in names" value="{{v.eyeColor}}">Age {{v.age}}</option>
      </datalist>
    </form>
  </section>
</main>

Answer №1

To display only the first 10 items, you can use the ng-if="$index < 10" directive within the option attribute. By doing this, the text filter will still work accordingly while rendering only the items with an index less than 10. The LimitTo function creates a new array containing just the 10 items, which may affect the search results displayed by the text filter.

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

User events in the fullCalendar

I'm feeling stuck. I currently have a basic fullCalendar setup for the User model in Rails. I want to add 2 buttons, allowing the User to separate the calendar into two views. One view would display only their own events, while the other would show al ...

One of the two identical pages is experiencing issues with the jQuery leanmodal while the other is

Despite having the same scripts and libraries loaded in two pages with identical templates, there is a slight difference in main content. Strangely, leanmodal only seems to work on the index page and not on any other page. <script type="text/javascrip ...

Using Jquery to insert an if statement within the .html element

Trying to implement jQuery to replace html content within an object, but struggling with incorporating an if statement. Like this: $(this).html("<select id=\'status\' name=\'status[]\' multiple><option valu ...

Having difficulty locating audio files within a Next.js project

I am facing challenges when trying to import my audio files into a redux slice. Currently, I am attempting to retrieve my audio files from the app > public > audio directory. I have made efforts to access my audio files through 2 different director ...

Deactivating Timeout Requests in Koa Server

I keep encountering a connection reset error. I strongly believe it's stemming from a lengthy REST request, causing it to timeout. { [Error: socket hang up] code: 'ECONNRESET' } Is there a method to deactivate request timeouts within Koa, ...

Would it be considered improper to implement an endless loop within a Vue.js instance for the purpose of continuously generating predictions with Tensorflow.js?

In my project, I am leveraging different technologies such as Tensorflow.js for training and predicting foods, Web API to access the webcam in my notebook, and Vue.js to create a simple web page. Within the addExample() method, there is an infinite loop r ...

Unable to successfully transfer parameters from AJAX to PHP

I successfully utilized Jquery UI to update the position of my table. Now, I am trying to pass a parameter from AJAX to PHP in order to update my database with the current table position. However, I encountered an issue where I receive a TypeError: data=nu ...

Locate the line number of a specific word within a paragraph using JavaScript

Imagine a scenario where there is a lengthy paragraph. By clicking on a specific line, JavaScript/jQuery will dynamically insert an empty <span> tag at the beginning of that particular line - just before the initial word. For example, take a look at ...

Pull data from one array of objects using the id from another array to display in a list using AngularJS ng-repeat

After retrieving a list of options, I make an API call to validate each option. The goal is to display whether each option is valid or not. My starting array looks like: $scope.preValidationArray = [ { id: 1, description: 'Item 1' }, { id: 2 ...

Converting JSON Data to Map Markers on Google Maps

Currently, I am attempting to pass a Json String into my Javascript code in order to create a list of markers on a Google Map. The map code functions properly as I have successfully tested it with a hard coded Json Object. However, now I need to fetch the ...

What is the best way to check if a user input matches any of the items saved in an array?

I'm working on coding a hangman app and I have a question. How can I compare the user input "userGuess" to the array "array" that consists of letters split from the randomly selected word "word"? If the "userGuess" matches any of the values in the "a ...

Tips for identifying the clicked location inside an element using JavaScript?

Is there a way in JavaScript to find out the exact position of a click within an element, like its distance from the left, right, or center? I'm struggling to determine whether the clicked area is on the left, center, or right side. https://i.stack.i ...

Issue with grunt-crx task detected

In my Gruntfile, I've integrated the grunt-crx task as shown below: crx: { packExtension: { src: "../build/unpacked", dest: "../build/dist" } } Whenever I execute the crx task on its ow ...

Encountering vulnerabilities during the deployment of my React App using NPM has presented a challenge

Just starting out with React Js and seeking some guidance. I've developed a small React app that filters team members based on text input, and it's running smoothly in the development environment when I start NPM. Please review my project and poi ...

How can I efficiently update child states within a parent class using ReactJS?

Exploring the parent component class Root extends React.Component { constructor(props) { super(props); this.state = { word: Words, }; } c ...

Error when attempting to open and close a div through a click event

Currently, I am in the process of developing a web service that generates arrays. I am facing an issue where all the div elements on my page load open by default, but I want them to remain closed and only open upon clicking. Specifically, I want a nested d ...

DataTables.js, the powerful JavaScript library for creating interactive tables, and its compatible counterpart

I'm currently making some changes to a dynamic table that require enabling a vertical scroll bar. As a result, I need to implement this vertical scroll bar mechanism on an existing table. The code in our project utilizes dataTables.js version 1.5.2 ...

What is the best method for aggregating multiple JSON responses into a single array?

I am struggling to get my data in the desired format of [{..},{..},{..}]. I have created an empty array using const arr = [], but when I push all JSON data into this array, the output shows as separate arrays. How can I fix this issue? // const arr = [] co ...

Retrieve the Content-Type header response from the XHR request

My intention is to check the header content type and see if it is text/html or text/xml. If it is text/html, then it indicates an error that I need to address before moving forward. ...

Is there a way to capture the input from the text box and store it in the local storage?

I'm confused about why the data entered into the input box is not being saved to local storage. <body> <input id="name"> <button onclick="bob()"> save </button> </body> <script> const user = document.getElementByI ...