Sorting Tables (Implementing ng-repeat and eliminating duplicate column names with ng-if)

I have a table with data displayed using ng-repeat and it is currently sorted properly. To view the initial setup, check out the first fiddle.

http://jsfiddle.net/HB7LU/10201/

<tr ng-repeat="each in list | orderBy:predicate:reverse">

I am aiming to prevent repetition of the name in the first column (Name) when the following row has the same name. The second fiddle demonstrates this scenario.

http://jsfiddle.net/HB7LU/10204/

<td ng-show="list[$index].name != list[$index-1].name">{{each.name}}</td>

Initially, this approach works well, but issues arise when the columns are sorted by clicking on the headers. The data becomes inaccurate due to the usage of list for the $index. I am unsure if there is an alternative solution to this issue. Perhaps there is a more efficient way to achieve the desired outcome.

Feel free to ask for more details if needed. Thank you! T

Answer №1

When you sort items, the $index may change and items that were previously repeated may no longer be consecutive (as indicated by the logic

list[$index].name != list[$index-1].name
). To address this, you can employ ng-init to establish the initial index of the ng-repeat. Values initialized using ng-init are not watched and will not change due to sorting.

 <tr ng-repeat="each in list | orderBy:predicate:reverse" ng-init="index= $index">

Check out this Fiddle

According to the documentation:

ngInit is only suitable for aliasing special properties of ngRepeat. In all other cases, it is recommended to use controllers for initializing scope values.

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

Utilizing a dynamic value in an Angular directive

For my latest project, I am working on developing a basic JSON pretty-printer directive using angular.js. Here is the code snippet I have so far: (function(_name) { function prettyJson() { return { restrict: 'E', ...

Ways to render component solely based on the alteration of the class props

In my ReactJS project, I am fetching JSON data from a RESTful Django host and using it to create a table with filters. Here is my Table class: class MainTable extends React.Component { constructor(props) { super(props); this.state = { res ...

What is the advantage of using event.target over directly referencing the element in eventListeners?

Suppose there are several buttons in an HTML file and the following code is executed: const buttons = document.querySelectorAll('button'); buttons.forEach((btn) => { btn.addEventListener('click', (e) => { console.log(btn.te ...

Is it possible to prevent users from clearing data in an Android application when using Ionic framework?

Currently, I am developing an app using the Ionic framework. The data is being stored on the mobile device via SQLite, but there is a concern that users can easily clear this data by clicking on the "clear data" button in the application info settings. The ...

The UglifyJsPlugin in Webpack encounters an issue when processing Node modules that contain the "let" keyword

Below is the code snippet from my project which utilizes Vue.js' Webpack official template: .babelrc: "presets": [ "babel-preset-es2015", "babel-preset-stage-2", ] webpack.prod.config.js new webpack.optimize.UglifyJsPlugin({ compress: { ...

What are the steps for transmitting an array of data to Parse Cloud Code?

Trying to send an array of contact emails as a parameter in Cloud Code function for Parse, here is how I am doing it: HashMap<String, ArrayList<String>> params = new HashMap<>(); ArrayList<String> array = new ArrayList<>(); a ...

Submitting Forms with XMLHttpRequest

I'm trying to utilize XMLHttpRequest in order to retrieve the response from a remote PHP file and showcase it on my webpage. The issue I'm facing is that the form's data isn't being submitted to the remote PHP page. Any suggestions on ...

Steps to verify the timepicker for accuracy and consistency throughout different time periods

I am currently working on validating a time picker for a project. I found a helpful example for date validation at http://jqueryui.com/resources/demos/datepicker/date-range.html but I need to adapt it for a time picker. Specifically, I need to ensure tha ...

What could be causing the read-only error in my presentation?

My website has always had a small slider that worked perfectly, but now an error message keeps popping up: Error: "myIndex" is read-only This is the JavaScript code in question: const myIndex = 0; carousel(); function carousel() { let i; const x = ...

Combining strings in a loop using Javascript

I have a loop hash data stored in a variable called rec. var rec = { }; for (var b = 0; b < 2; b++) { rec['id'+b] = b</p> } Next, I have a piece of JavaScript code that creates a template for a table. var template ='<tab ...

Attempting to transfer a property from one page to another using the Link component in NextJS

Currently, I have a page containing six Link elements that are meant to redirect to the same destination but with different props based on which link is clicked. To pass props, this is how I've implemented it: <Link href={{ pathname: '/pro ...

Having trouble integrating the circular progress bar into the movie card and getting it to align properly

Struggling to position my react circular bar for movie rating in the bottom corner of the movie card. The classes are not working as expected, even though I tried to replicate it from another website using React and SCSS while I'm utilizing Material-U ...

Invoke the designated JavaScript function within a subordinate <frame>

Below is an example of the standard HTML structure for a parent page named "index.html": <html> <head> <title>test title</title> </head> <frameset cols="150,*"> <frame name="left" src="testleft.html"> ...

Step-by-step guide for importing a JSON file in React typescript using Template literal

I am facing an error while using a Template literal in React TypeScript to import a JSON file. export interface IData { BASE_PRICE: number; TIER: string; LIST_PRICE_MIN: number; LIST_PRICE_MAX: number; DISCOUNT_PART_NUM: Discout; } type Discoun ...

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

Recently, I came across a fantastic plugin that works perfectly on regular computer browsers. However, when I tested it on my android phone, the css3 animation for the dropdown appeared choppy and seemed to be dropping frames. Does anyone have suggestions ...

Design interactive images in NativeScript

I need assistance setting up clickable images in NativeScript. My goal is to arrange 5 images horizontally, and when one image is clicked, the images to its left should change their values. Here's what I've attempted: <Label col="0" row="0" ...

code, scripting - modal pop-up

My script currently has a popup window using window.open, but most browsers block this type of popups. I now want to change it to another popup that includes a php script, similar to what I've seen on other sites. It seems like they are using ajax. Ca ...

Unveil SQL Limit with a Simple Scroll Load

After successfully laying out and creating my website, the next step is to load more results on scroll. This question has been posed numerous times before, but I am curious if there is a simple solution that can seamlessly integrate into my current setup. ...

What is the most effective way to send multiple values through the <option> value attribute?

Currently, I am in the process of creating an online shopping item page. To display all the necessary information about an item (such as price, image, name, etc.), I use the 'item_id' to loop through a database containing item info. Additionall ...

Exploring MongoDB through User Interface Requests

As part of a project to develop a minimalist browser-based GUI for MongoDB, an interesting question has arisen. How can we accurately display the current state of the database and ensure it is continuously updated? Specifically, what methods can be utiliz ...