angularJs ng-hide using the $index value within an ng-repeat directive

I have a list of items that need to be displayed with serial numbers. I tried using $index with ng-repeat, but when an element is hidden, the index increases unexpectedly.

The code I attempted is as follows:

<div ng-repeat="itemRow in salesitem" class="tableRow h7" ng-hide="itemRow.flagDeleted">
                    <div class="tableCell">{{$index}}</div>
                    <div class="tableCell">{{itemRow.name}}</div>
                    <div class="tableCell">{{itemRow.qty}}</div>
</div>

When itemRow.flagDeleted is True and the item is not displayed, the index still increments, causing the serial numbers of the subsequent items to be incorrect.

Answer №1

Try applying a filter within the ng-repeat directive:

<div ng-repeat="itemRow in salesitem | filter:{ 'flagDeleted' : false}" class="tableRow h7">
    <div class="tableCell">{{$index}}</div>
    <div class="tableCell">{{itemRow.name}}</div>
    <div class="tableCell">{{itemRow.qty}}</div>
</div>

Click here to see a live demo

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

Sending a list of strings to a Controller in MVC 3 Razor

I am encountering an issue when passing a list of strings into a controller in MVC 3 Razor. I am using jQuery to set the values, but for some reason, the first value is always false on the server side. Here is my code: Class: public class ListFieldInf ...

Allowing Users to Easily Copy CSS ::before Content

Text inserted via pseudo-elements like ::before and ::after cannot be selected or copied. Is there a way to change this behavior? span::before { content: "including this text"; } <p> When the text of this paragraph is selected and copied, ...

Is it necessary for TypeScript classes that are intended for use by other classes to be explicitly exported and imported?

Is it necessary to explicitly export and import all classes intended for use by other classes? After upgrading my project from Angular 8 to Angular 10, I encountered errors that were not present before. These issues may be attributed to poor design or a m ...

How can you determine if a mouseover event is triggered by a touch on a touchscreen device?

Touchscreen touches on modern browsers trigger mouseover events, sometimes causing unwanted behavior when touch and mouse actions are meant to be separate. Is there a way to differentiate between a "real" mouseover event from a moving cursor and one trigg ...

Error: Attempted to access keys from a non-object value. - Gruntfile.js

Can anyone help me resolve the following issue: Error Message: PhantomJS 1.9.8 (Windows 7) ExampleController should query the webservice FAILED Error: [$injector:modulerr] Failed to instantiate module TestWebApp due to: TypeError: Requeste ...

Should I use the item-text property or another property in v-autocomplete for Vuetify search?

I have a to-do list that consists of an array of objects with properties (id, title, description). I want to display the title in the v-autocomplete, but when I search for a word, it works fine. However, what I actually want is to search for either the des ...

Utilize Array in Form Input with Index and Spread Operator

Looking to create a form that can handle array data with dynamic fields in TypeScript. Encountering the following error: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ nam ...

Challenge encountered while using the like operator with Integer data type in Mongoose

I am encountering an issue with constructing a where query in Mongoose for an integer data type. The key 'facevalue' is of integer data type. When I execute a find query, it appears something like this: Below is the code snippet: var orCond ...

Searching for dates in an ng-repeat using AngularJS

I've implemented a global filter for my array of data, and it seems to be working fine overall except for the dates. I've done some research but couldn't find a clear solution. I've come across custom filters, but I'm wondering if ...

Assistance needed to make a jQuery carousel automatically rotate infinitely. Having trouble making the carousel loop continuously instead of rewinding

Currently, I am in the process of creating an auto-rotating image carousel using jQuery. My goal is to make the images rotate infinitely instead of rewinding back to the first image once the last one is reached. As a beginner in the world of jQuery, I&apos ...

Improved method for retrieving a subtask within a personalized grunt task?

As someone who is just starting out with Grunt and has only created a few custom grunt tasks, I've come up with what might be seen as an unconventional solution for traversing the initConfig to subtasks. My approach involves putting together a regex a ...

An easy way to create an input field after clicking a button

When I try to add a field on Button Click, the default field is not showing and does not get added upon button click I have put in my best effort but I cannot figure out what the problem is. I have added functions and used Math to generate a unique id. Th ...

"Mastering the art of debouncing in Angular using

I am facing an issue where, during a slow internet connection, users can press the save button multiple times resulting in saving multiple sets of data. This problem doesn't occur when working locally, but it does happen on our staging environment. E ...

Refreshing an HTML table using instance variables from a C# class (utilizing jQuery and AJAX)

Explore <script type="text/javascript"> $(document).ready(function () { $("#viewDetails").click(function () { $.ajax( { type: "POST", url: '@Url.Action("GetDetail", "ControllerName")' ...

Having issues with custom directives not functioning properly within AngularJS' RouteProvider

Currently, I'm in the process of learning AngularJS and specifically focusing on the route provider feature. I have successfully built a few pages that functioned well independently. Now, my aim is to implement the route provider into my project. In m ...

Open Zurb Foundation Reveal Modal from the bottom of the screen

Struggling to make the reveal modal open from the bottom of the window. Any assistance would be highly appreciated. I've been attempting to tweak the open function with the reveal js, as seen in the original code below. Thank you, P open : function ...

Get a URL from the JSON data returned by the Wikipedia API

How can I retrieve the image URL from a JSON response and store it in a variable? I found helpful information on the MediaWiki API help page Following this example to extract image information from a page: https://commons.wikimedia.org/w/api.php?action= ...

I can view the data retrieved in the console, but I am having difficulty displaying it on the screen

I have successfully retrieved data from the API, as indicated by the output in my console. However, I am facing issues in displaying this data on the webpage due to a potential error in my code structure. Despite this, I can confirm that the fetched data ...

Encountering difficulty in accessing game.html following button clicks

Why isn't the redirection to game.html happening after clicking on the buttons in index.html? The file structure consists of server/server.js, public/index.html,public/game.html. <!DOCTYPE html> <html> <title>QUIZ GAME</title ...

The functionality of reordering columns, virtual scrolling, and resizing the grid in jqgrid are not functioning properly

Implementing jqgrid with Symfony to display a datagrid has been a challenging task for me. Thanks to Oleg's insightful response, many of the major issues have been resolved. Below is a snippet of my code: <link rel="stylesheet" type="text/css" ...