Disable the click event for the last element displayed in ng-repeat

So I have this ng-repeat block that goes like this:

<ol>
    <li class="pointer node-name" ng-click="myClick(node)" ng-repeat="node in myArray">{{node.name}}</li>
</ol>

It's all good and dandy, generating <li> elements inside an <ol> from myArray.

But now, the tricky part - I want the last item in the ng-repeat to not fire the ng-click event or be somehow disabled. For instance:

<ol>
     <li class="pointer node-name" ng-click="myClick(node)" ng-repeat="node in myArray">Step 1</li>
     <li class="pointer node-name" ng-click="myClick(node)" ng-repeat="node in myArray">Step 2</li>
     <li class="pointer node-name" ng-click="myClick(node)" ng-repeat="node in myArray">Step 3</li>
     <li class="pointer node-name" ng-click="myClick(node)" ng-repeat="node in myArray">Step 4</li>
     <li class="pointer node-name" ng-repeat="node in myArray">Step 5</li>
    </ol>

I wonder if something like this can even be achieved. Thanks for any help!

Answer №1

To determine if the element is the last one, utilize the $last property in the ngRepeat. Then, include a condition in your click handler...

<li class="pointer node-name" ng-click="myClick(node, $last)" ng-repeat="node in myArray">Step 5</li>

Answer №2

By utilizing $index, you can track the loop's current index within myArray, ranging from [0 .. n-1]. Once $index reaches myArray.length - 1, you have the option to deactivate the ng-click functionality.

Answer №3

Disabling it should be a simple task.

<ol>
    <li class="pointer node-name" ng-click="myClick(node)" ng-disabled="$last" ng-repeat="node in myArray">{{node.name}}</li>
</ol>

Alternatively, you can verify if the index matches the total array length minus 1 (which indicates the last element).

<ol>
    <li class="pointer node-name" ng-click="myClick(node)" ng-disabled="$index === myArray.length - 1" ng-repeat="node in myArray">{{node.name}}</li>
</ol>

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

Ensure the accurate port is specified in JavaScript to connect to a WCF service

I am working on a JavaScript project where I need to check which port number a WCF service is hosted on, out of a list of 10 different port numbers. I want to find out which port number the service responds to without any errors using AJAX JSON. Although ...

Identification of inappropriate language in usernames

One of the challenges I'm facing is detecting inappropriate language in usernames. Currently, I am using regex to validate the username based on a specific pattern: "/^[A-Za-z0-9]*(\d*\.\d*)*[A-Za-z0-9]+$/" This regex pattern allows u ...

Unable to retrieve ng-model data within directive's template

I am encountering an issue where I can't access a model that is located in the template of a directive. The directive's scope does not seem to be displaying that model for some reason. What could I be doing incorrectly? http://jsbin.com/xorujuqu ...

"Angular JS: Troubleshooting the Issue of Default Selection Not

Struggling to set a default selected option in my dropdown, but no matter what I try, it just won't work. The output that keeps getting generated is like this: Output: <select ng-init="selectedFrom = phoneNumbers[0]" ng-options="phone.Number for ...

Issues with capturing object values in Typescript with Angular click event

Encountering an issue with binding values when passing Event parameters from the Template to Typescript Button click event. https://i.sstatic.net/SEnL6.png Take a look at the object below, it is properly binding but not reflecting the same in the Type ...

The shopping cart is unable to display the name property as it is undefined

I'm currently working on creating a basic shopping cart using JavaScript. $('.addToCart').click(function(event) { event.preventDefault(); var name = $(this).data('name'); var price = Number($(this).data('price')); ...

Can this functionality be accomplished using only HTML and CSS, without relying on JavaScript?

Image for the Question Is it possible to create a zoom functionality using only HTML and CSS, without relying on JavaScript? I need this feature for a specific project that doesn't support JavaScript. ...

Retrieve a pair of values in a Node.js JavaScript application

I'm in search of a solution to locate an item and its index within an array, and then store them in separate variables. Though I'm relatively new to programming, I'm encountering challenges in tackling this problem. I attempted to use destru ...

Validate all JavaScript buttons by binding a click event

I've implemented the JS validation plugin from this source and it's functioning properly. However, it captures all button clicks on the page, including when I click on Back to Home, triggering form validation unnecessarily. I only want the form ...

I'm experiencing issues with event.preventDefault() not functioning properly when used within a contenteditable div

I'm currently working with some basic Angular 7.x code that involves a contenteditable div. I'm attempting to prevent the default action when a user hits the [ENTER] key, but no matter what I do, it still moves the cursor to the next line. What a ...

Adjust parent div size based on image size increase

I am currently facing a situation where I have a page displaying an image, but sometimes it appears too small. In order to make the image larger, I have utilized CSS Transform and it is working well. However, the issue lies in the fact that the parent DIV ...

Navigating spaces, tabs, and line breaks during ReactJS rendering

I have been attempting to display a string in a ReactJS Dialog box, which contains spaces and newlines represented by /n /t characters. My goal is to show the text exactly as it is with all the spaces and line breaks preserved. Despite trying various metho ...

Using a line to plot data in Highcharts instead of an area chart

Currently, I am experimenting with the highcharts demo provided in the documentation using highcharts-ng. I am attempting to create area charts, but unfortunately, when I execute the code, only the line is displayed without the desired area. Below is a s ...

Encountering an unexpected token in Javascript when using conditionals

I am currently attempting to integrate a JavaScript condition within a listed order, containing two radio buttons that need to be checked in order to progress to the following list based on the selection. <li data-input-trigger> <label class="fs- ...

Passing data from PHP to JavaScript

Currently, I am working on creating a registration/login form where user information is sent via POST to a PHP script that interacts with a database. My goal is to have the PHP script return either an "ok" or "wrong" value to the JavaScript function upon c ...

Transforming the *.vue file into a *.js file for deployment on a content delivery network

Is there a way to compile Component.vue files into JavaScript files for use with the Vue CDN in HTML? For example, consider the following component Component.vue: <template> <div class="demo">{{ msg }}</div> </template& ...

Guide to updating the class attribute of an HTML article element using JavaScript

I am working with 6 different styles in CSS and I am trying to apply them randomly using the following code: <script> function getRandom(max) { return "style" + Math.floor(Math.random() * max); } document.getElementById('YYY ...

Leveraging Promises within if conditions

Has anyone encountered difficulties using Promises within an if condition? I'm currently dealing with a problem where the code continues to execute even when the if statement is false. Any suggestions on how to resolve this issue? For a detailed exam ...

How to enhance mouse tracking beyond browser window boundaries in Three.js and across various page elements

I'm facing an issue with my three.js scene where I have buttons positioned on top and off to the side of the scene. When you click and drag to spin the camera, the spinning stops when dragging over the buttons or outside the window. I am using three.j ...

Tips for updating the content of a div with fresh data using a slideshow effect in jQuery

Imagine you have a div called A and an array filled with text data. When t=0, div A will display $data[0]. Then, after every n seconds, I want the div to show the next piece of data in the array. I am interested in creating a transition effect similar to ...