Conceal the most recent 2 entries in Angular's ng-repeat

I am currently working with a table that uses the ng-repeat attribute to display data fetched from a web service. Initially, I was able to hide the last record by using ng-hide="$last". However, due to an update in the web service, I now need to hide the last 2 records and I am unsure of how to achieve this.

This is what my current code looks like:

<table>
  <tr ng-repeat="d in exportData.result" ng-hide="$last">
     ...code....
  </tr>
</table>

Any assistance on how to hide the last 2 records would be greatly appreciated.

javascriptangularjs

Answer №1

Modify 

d in exportData.result

To:

d in (exportData.result.slice(0, exportData.result.length-2))

An alternative approach would be to implement the same change within your controller.

Answer №2

Have you considered utilizing Angular's limitTo filter within your ngRepeat directive?

<tr ng-repeat="d in exportData.result | limitTo:quantity">

You can then update the quantity value in your controller to align with your updated desired amount.

$scope.quantity = $scope.exportData.result.length - 2;

Answer №3

To efficiently display data in a table using ng-repeat, you can create and call a function:

<table>
  <tr ng-repeat="d in getTruncatedArray()">
     ...code...
  </tr>
</table>

In your Controller:

$scope.getTruncatedArray = function() {
    return exportData.result.slice(0, exportData.result.length - 2));
}

Insight

I recommend utilizing a method for filtration rather than embedding it directly into the HTML. By calling a method, you are able to maintain cleanliness in your HTML code and easily update or modify filters.

Answer №4

Here's another sneaky technique :)

<tr ng-repeat="d in exportData.result track by $index" ng-show="$index < exportData.result.length -2">
    ...code....
</tr>

Remember that using ng-show/hide actually creates DOM elements, it just manipulates CSS visibility. To avoid this behavior, try filtering your array like @nashter suggests.

Answer №5

Check out this fiddle

<div ng-controller="MyCtrl">
<div ng-repeat="line in lines">
<div class="preview" ng-hide="((lines.length-2)==$index)||($index==$last)">{{$index}}   </div>
</div>

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

In React, the constant always has a default value of "Object : Default"

My current project involves using SlateJS and I am encountering an issue when trying to load data into a const using: imgData = data.get("file"); Everything works as expected if React is not imported, but once it is included, the object contains unexpecte ...

javascriptreactjsecmascript-6

Having trouble with images not showing up on React applications built with webpack?

Hey there! I decided not to use the create react app command and instead built everything from scratch. Below is my webpack configuration: const path = require("path"); module.exports = { mode: "development", entry: "./index.js", output: { pa ...

javascripthtmlcssreactjs

Utilizing the Angular *ngFor directive to iterate through JSON data

Just stepping into the world of Angular, I want to share a brief overview of my goal since the code is lengthy. Here's the relevant part: Within my project, I have a list display component. And I have two components, namely animals and zone. For in ...

javascriptjsonangulartypescriptbehaviorsubject

"Encountering an issue with passing parameters in Spring controller while using AJAX

I'm experiencing a peculiar issue when trying to pass an Int param in a POST request to the Spring MVC controller. What's strange is that the parameter is being sent through POST, but it isn't being parsed by the controller. Here's th ...

javaajaxangularjsspringspring-mvc

My attempt to reveal hidden information in my repeater using a button and JavaScript has not produced the desired results

Welcome to my first post on this forum. In the HTML code, there is a repeater containing a button shown below: <button type="button" class="btn btn-info">Contact</button> <p style="display: none" id="contact"><%# Eval("Email") %&g ...

javascripthtmlasp.netwebforms

What's the best way to customize the color of the text "labels" in the Form components of a basic React JS module?

I have a React component named "Login.js" that utilizes forms and renders the following:- return ( <div className="form-container"> <Form onSubmit={onSubmit} noValidate className={loading ? 'loading' : ''}&g ...

javascriptcssreactjsformscolors

Debugging TypeScript on a Linux environment

Approximately one year ago, there was a discussion regarding this. I am curious to know the current situation in terms of coding and debugging TypeScript on Linux. The Atom TypeScript plugin appears promising, but I have not come across any information ab ...

javascriptlinuxgoogle-chrometypescriptatom-editor

What is a way to perform pre-increment without utilizing the ++I operator?

It is my belief that the code snippet below: i += 1 or i = i + 1 does not have the same effect as ++i. Am I incorrect in this assumption? Is there an alternative method to achieve pre-increment without utilizing the ++ operator? ...

javascriptjavaangularpre-increment

Ways to refresh Angular filters

How can I dynamically update AngularJS filters? I want to utilize the angular currency filter to show the correct currency symbol based on the language file that is loaded. I am looking for a way to refresh the filters after loading the appropriate langu ...

angularjs

JavaScript can dynamically attach EventListeners to elements, allowing for versatile and customized event

I am currently populating a table using data from an XML file. One of the columns in the table contains links to more details. Due to the unique requirements of my web page setup (Chrome extension), I need to dynamically add an event handler when the table ...

javascripthtmldom-eventsaddeventlistenerevent-listener

Uncovering the Power of Shadow DOM within HTML

Lately, I've noticed a lot of buzz surrounding Shadow DOM. During a video I watched about the launch of Angular 2, the speaker kept mentioning Shadow DOM without much explanation. Can someone clarify what exactly Shadow DOM refers to? ...

javascriptangularjshtmldom

Using array.map with Promise.all allows for concurrent execution

Currently, I am working with an array of images and attempting to apply image processing techniques using an asynchronous function. The code is functioning as expected since each image in the array contains an index field representing its position. // Res ...

javascriptreactjsreact-native

Real-time console input/output feature for a gaming server utilizing either JavaScript or PHP

About My Minecraft Server: After running a Minecraft server in my basement for a few months, I realized that using TeamViewer to input commands and monitor the console was not ideal. The console of a Minecraft server provides a log of events with timestamp ...

javascriptphphtmlcmdminecraft

Issue: Module 'xml2json' not found

Encountered an error while running my project package. When I tried to install the necessary packages using npm install xml2json I still encountered another error below. Can anyone provide suggestions or ideas on how to resolve this issue? D:\xa ...

javascriptnode.jsnpmnpm-installlibxml-js

Display the line in the kendo editor when using a table in AngularJS

When using the Kendo Editor to display an HTML file with a table, a line is being displayed. How can I remove this line from the table? Please refer to the image below: I am looking to eliminate the line from the table. https://i.sstatic.net/w7p1L.png & ...

angularjskendo-uikendo-editor

Avoid using CSS styles when accessing the website from China

There seems to be an issue with one of our websites. Visitors from China are viewing the site without the CSS files, only the HTML. What could be causing this? Why is it only happening in China? Could there be restrictions in place, possibly for JavaScri ...

javascriptcss

Unable to load nested iframe

When working with an HTML document, I tried to add an iframe in the body without any cross-origin restrictions (same URL). However, when I tried to do the same thing within the appended iframe, although the nested iframe element was successfully added to ...

javascripthtmliframe

What is the best approach to accessing a key within a deeply nested array in JavaScript that recursion cannot reach?

After hours of research, I have come across a perplexing issue that seems to have a simple solution. However, despite searching through various forums for help, I have reached an impasse. During my visit to an online React website, I stumbled upon the web ...

javascriptarraysreactjsgoogle-chrome-devtoolsnested-lists

What are the steps to integrate HJSON with Jest in a create-react-app development environment?

Currently, I am utilizing HJSON within a create-react-app project (view answer here). However, Jest does not utilize the same webpack configuration, resulting in a failed import of HJSON - for instance, import options from '../assets/options.hjson&ap ...

javascriptjestjshjson

Is there a way to determine the size of an array following the use of innerHTML.split?

There is a string "Testing - My - Example" I need to separate it at the " - " delimiter. This code will help me achieve that: array = innerHTML.split(" - "); What is the best way to determine the size of the resulting array? ...

javascriptinnerhtml