Angular Js code to dynamically hide a button whenever a specified value increases

Upon observation of the screenshot, it is evident that the button increments each time an index is incremented.

My inquiry pertains to whether, as the index increases, preceding numbers will no longer display the button.

For instance, in the provided screenshot, numbers 1 and 2 each have a button labeled "Insert Question Below." The request is for this button to only appear beside the current highest number, meaning in this case it should only be visible next to number 2.

javascript

me.create_question_object = function (index) {
}

html

<div class="col-md-12 yq-default-pad  top50 text-center">
   <div class="text-center">
      {$ $index + 1 $}.)
      <button  ng-hide ng-click="main.create_question_object($index)" class="btn btn-success">
         <i class="fas fa-plus-circle"></i> Insert Question Below</button>
   </div>
</div>

To view the screenshot, click here: https://i.sstatic.net/rI1R0.jpg

Answer №1

It appears that you are using an ng-repeat to display the questions, indicating that there is an array containing the questions.

In such a case, you can display a button on the last question by using

ng-if="$index === myArray.length-1"
.

The $index variable is a special scope variable provided by Angular specifically for the ng-repeate directive.

angular.module('myModule', [])
  .controller('ctrl', function($scope) {
    $scope.questions = [1, 2, 3, 4];
  })


angular.bootstrap(document.getElementById('root'), ['myModule']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="root">
  <ul ng-controller="ctrl">
    <li ng-repeat="item in questions">
      {{item}}
      <button ng-if="$index === questions.length-1">&times;</button>
    </li>
  </ul>
</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

I'm feeling a bit lost with this API call. Trying to figure out how to calculate the time difference between the

Currently, I am working on a project for one of my courses that requires making multiple API calls consecutively. Although I have successfully made the first call and set up the second one, I find myself puzzled by the specifics of what the API is requesti ...

Is your script tag not functioning properly with Promises?

Below is the code snippet used to dynamically append scripts in the DOM using promises. This piece of code is executed within an iframe for A-frame technology and it is generated using Google Blockly (Block-based coding). export const appendScript = asy ...

Guide on transferring information from .ejs file to .js file?

When sending data to a .ejs file using the res.render() method, how can we pass the same data to a .js file if that .ejs file includes a .js file in a script tag? // Server file snippet app.get('/student/data_structures/mock_test_1', (req, res) = ...

My current scroll animations are problematic as they are causing horizontal scrolling beyond the edge of the screen

I've implemented scroll animations on various elements of a website I'm constructing. The CSS rules I'm utilizing are as follows: .hiddenLeft { opacity: 0; filter: blur(5px); transform: translateX(-090%); transition: all 1s; ...

Is there a way to turn off the highlights feature on MapHilight?

I am currently facing a challenge that has me stumped, and I am hoping you can provide some guidance. I'm working on a page located at: Here's the issue: I am focusing solely on the states of Washington and Idaho at the moment, and I want users ...

How to effectively pass custom props or data to the Link component in Next JS

As I dive into Next JS, I've hit my first roadblock. Currently, I am working on a page that showcases various podcast episodes with preview cards on the homepage. The card component code looks like this: import React from 'react'; import Li ...

When using phonegap with iOS, HTTP requests consistently return a status of 0 when accessing local files

I've encountered an issue while using Phonegap 3.3.0 on iOS. The HTTP request I'm making always returns 0, regardless of whether the file exists or not! var url = './images/pros/imagefile.png'; var http = new XMLHttpRequest(); http.o ...

Three.js - Transformation Handles

Utilizing the transformControls for translating, rotating, and scaling objects in my scene has been successful. However, I am encountering an issue where the clickable area of geometries is offset: https://i.sstatic.net/7SOA5.jpg This means that clicking ...

Utilizing GridFS for efficient file storage in MongoDB with the seamless integration of Mongoose and AngularJS

When I first started, I had very little knowledge on how to save a file to a NoSQL MongoDB using Mongoose and Angular. After extensive research, I discovered that I needed to utilize GridFS to solve my problem. The challenge was finding a detailed explan ...

Retrieve the variance between two arrays and store the additions in AddedList and the removals in RemovedList using typescript

I am still getting the hang of Typescript and I am trying to figure out the best solution for my issue. I have two arrays, A and B, and I need to identify the difference between them in relation to array A. The goal is to separate the elements that were ad ...

vaadin-grid selection issue not functioning

I'm encountering an issue with the row selection feature. The selectedItems array only updates when I select all items at once. I'm not sure if I'm missing something or if this is a bug. selectedItems: An array that contains the selected ...

React Native error - "Invalid element type: expected a string or class/function, but received undefined" - encountering issue with importing a custom library?

Alright, I'm looking to make some modifications to this library, so I am attempting to import the non-transpiled version by downloading the repository and importing it from here: https://github.com/nicotroia/react-native-floating-action-menu#readme A ...

Error Message: React encountered an issue when trying to access the 'theme' property of an undefined object

Currently developing a web application using React, I encountered an issue when trying to implement the react-datepicker component in my code. Upon adding the following lines of code, my web application breaks and an error is thrown: import {SingleDatePic ...

Utilizing Vue.js to dynamically populate one multiple select based on another multiple select's

Can I create two multiple select fields where the options in the second select menu are based on what is chosen in the first select? Clarification: Each category has various associated descriptions. The initial select menu, named "categories", contains ...

A guide on extracting text enclosed by <a> and </a> tags using regular expressions

I have come across the following code: <a align="center" href="http://google.com"><b>Google Link<b></b></a> <a align="center" href="http://yahoo.com"><strong>Yahoo Link</strong></a> Now, I am looking ...

How can we enhance the efficiency of rendering text on the screen?

Imagine having a <p> tag inside a <div> with specific properties: div { height: 100px; width: 100px; overflow: hidden; } My goal is to continuously add words to the <p> tag until an overflow is detected, meaning stop when the f ...

Regular expression ignores the initial "less than" character

Question Statement: From: John Doe <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddb7b2b5b3aeb0b4a9b59dbab0bcb4b1f3beb2b0">[email protected]</a>> Date: Mon, 25 Oct 2021 09:30:15 -0400 Message-ID: << ...

Using jQuery to load HTML response into entire page

When working with my ajax code, I receive a html response. Is there a way to entirely replace the current page with this html response? So far, I have only come across window.location.href, which simply redirects to the url response. Here is a snippet of ...

Customizing text inputs in three.js

Why are the HTML textboxes disabled for input when the "render" button is working properly? I have tried changing the render.domElement to different elements on the page such as container, info, parent, and scene, but I cannot figure out the reason for t ...

The expo-location feature is failing to accurately record and store all of the positions within the array

Incorporating expo-location in my react-native app, I utilize it to track the user's positions and store them in a redux object. While debugging the object reveals that all positions have been successfully inserted, upon retrieving this array, it turn ...