Display a concealed div when an ng-click event occurs within an ng-repeat loop

$scope.editPostComment = false;

Whenever I click on the button, it displays the textarea in all the repeated items instead of just the clicked div!

<div class="commentBox" ng-show = "editPostComment">
                    <textarea name="editor2" class="content-box allfilecomment" id="comment-box" focus-me="{{focusCommentBox}}"
                    ng-model="allCommentText"
                    markdown-editor="{'iconlibrary': 'fa', addExtraButtons: true, resize: 'vertical'}"
                    rows="10">

                    </textarea>
                    <div class="hints">
                      <span class="boldtext">**Bold**</span>
                      <span class="italictext">_italics_</span>
                      <span class="striketext">~~strike~~</span>
                      <span class="codetext">'code'</span>
                      <span class="codetext">'''preformatted'''</span>
                      <span class="quotetext">>quote</span>
                    </div>
                    <div id="comment-btns">
                      <button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="postAllComment(commentmode)">Edit</button>
                    </div>
                </div>
javascriptangularjsmodel-view-controller

Answer №1

To ensure each row has a unique identification, assign an id based on the index and control the visibility of the row accordingly.

function showEdit(id) {
    vm.editPostComment = id;

}
 
 
 <div ng-repeat="row in rows track by $index">
     <div class="commentBox" ng-show = "editPostComment == $index" >
         <textarea name="editor2" class="content-box allfilecomment" id="comment-box" focus-me="{{focusCommentBox}}"
                    ng-model="allCommentText"
                    markdown-editor="{'iconlibrary': 'fa', addExtraButtons: true, resize: 'vertical'}"
                    rows="10" >

                    </textarea>
                    <div class="hints">
                      <span class="boldtext">**Bold**</span>
                      <span class="italictext">_itlaics_</span>
                      <span class="striktext">~~strike~~</span>
                      <span class="codetext">'code'</span>
                      <span class="codetext">'''preformatted'''</span>
                      <span class="quotetext">>quote</span>
                    </div>
                    <div id="comment-btns">
                      <button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="showEdit($index)">Edit</button>
                    </div>
                </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

What could be causing the hover effect to not work on other elements within the div?

I am working on creating a card that displays only the image when not hovered, but expands and reveals additional information in a div to the right of the image when hovered. Unfortunately, when I hover over the image and then move towards the adjacent div ...

javascripthtmljquerycssmousehover

Tips for utilizing the if statement within ng-repeat in Angular version 1.0.8

My version of angular is 1.0.8-stable My main goal is to arrange data in rows of 3. This is the desired structure for my HTML: <div class="table-row"> <div class="item">item1</div> <div class="item">item2</div> ...

javascripthtmlangularjsangularjs-directive

Using Three.js to create smooth rotations for objects

I have a logo in .obj format that I am loading onto a canvas using three.js. The logo is an integral part of the website's loading section that I am currently developing. Within this section, there is a 'Click to Enter' button. My goal is fo ...

javascriptthree.js

Move the divs within the overflow container by sliding them, then take out the initial element and append it to the end

Currently, when I utilize .appendTo(".wrapper") as shown in the code below, it eliminates the animation effect. My goal is to have the div on the far left slide out of view, triggering an overflow hidden effect, and then be placed at the end of the slide c ...

javascriptjqueryhtmlcss

Trail of crumbs leading to pages displayed in a div container

My website is designed with only one page where all other pages are loaded within a div. I am looking to implement breadcrumbs to keep track of the pages loaded inside the div. However, the solutions I have found online only work for pages loaded in the en ...

phpjavascriptjqueryajaxbreadcrumbs

The utilization of 'new' is not allowed with an expression that does not have a call or construct signature in TypeScript

While searching for a solution, I stumbled upon this link which unfortunately did not provide the answer I was looking for: Cannot use 'new' with an expression whose type lacks a call or construct signature I am facing a similar issue. In my JavaS ...

javascripttypescript

Struggling to reset the first item in an HTML select dropdown with Angular - any tips?

I am having an issue with my dropdown in a modal window. When I first open the modal, the dropdown works as expected. However, if I make a selection and then close and reopen the modal, the selected value remains instead of resetting to 'None selected ...

javascripthtmlangulardrop-down-menu

Colorbox scalePhotos function malfunctioning

The scalePhotos option in Colorbox does not seem to be working correctly for me. I have tried various methods to set it, including initializing Colorbox using the following code snippet right before the closing </body> tag in my HTML: jQuery('a ...

javascriptjqueryhtmlcsscolorbox

Use jQuery to populate a span element with information that is solely obtainable within a foreach loop during the rendering of buttons

I am currently navigating through learning MVC, and I have hit a roadblock. Working with Web Forms was more familiar to me, so I find myself struggling quite a bit with this new framework. After dedicating most of my day to it, I realize I need some assist ...

javascriptjqueryasp.net-mvc

What is the best way to iterate through an object and retrieve the following 3 items using a for loop in JavaScript

After fetching data from a website and storing it in a variable, I have successfully implemented a for loop that returns 3 properties from the object every time a button is clicked. However, the issue arises as the same data is returned with each button c ...

javascriptarraysobject

Correct Way to Use 'useState' in Formik's 'onSubmit' Function?

I recently encountered an issue while using Formik in my Next.js application. Specifically, I am facing a problem with the submit `Button` component, which accepts a `showSpinner` prop to control its behavior. When set to true, the button is disabled and d ...

javascriptreactjsnext.jsformik

Why are the HTML links generated by JS not opening in Chrome?

<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a> Additionally: - A setInterval function refreshes the sibling's content every second, although it should not affect this specific el ...

javascriptjqueryhtmlcss

Choosing the Right Project for Developing HTML/Javascript Applications in Eclipse

Whenever I attempt to build a webpage using eclipse, I am presented with two choices: -- A Javascript project -- A Static web project If I opt for the former, setting up run to open a web browser can be quite challenging. If I decide on the latter ...

javascripthtmleclipseproject

Adjust the size of the frame by dragging the mouse cursor to change both the width

I'm a bit lost on where to direct this question, so I decided to include the html, web, and css categories (though I suspect it's related to css). The task at hand involves creating an html page with a fixed header, while the content area compris ...

javascriptjqueryhtmlcssdynamic-html

HTML counterpart to PHP's include for JavaScript components

I am searching for a Javascript alternative to a method I have been using in PHP. Specifically, I want to streamline the basic setup of my pages: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

javascriptphphtmlincludedoctype

Solution to the issue of hitting the maximum limit of 10 $digest() iterations

I have successfully retrieved and displayed data from the database using Web API on my webpage: <div ng-repeat="Item in Items"> <div class="row"> <div class="col-sm-3">{{Item.Id}}</div> <div class="col-sm-3" ...

angularjs

Encountered an issue during the Jest test where the error message states 'Cannot call Class constructor Stack without using the keyword 'new''

I have encountered an issue with my Jest test for an AWS CDK configuration import { expect as expectCDK, matchTemplate, MatchStyle } from '@aws-cdk/assert'; import * as cdk from '@aws-cdk/core'; import { KmsMultiregionPrincipalKey } fro ...

javascripttypescriptecmascript-6jestjsaws-cdk

Is it beneficial to cater to users who do not have JavaScript capabilities on my website, considering that I am currently using JS links to

My website heavily relies on JavaScript for navigation, passing a parameter to always indicate the starting page and displaying it in a navbox for easy access back. Should I include both href links for non-JS versions and onclick links for JS-enabled vers ...

javascripthtml

What could be causing the failure of the JSON parse for dynamic link parameters?

I am currently attempting to pass parameters to a dynamic page within an Amplify/NextJS application. This is still a work in progress. My objective is to utilize the passed parameters to generate a basic page based on 4 parameters included in the URL invo ...

javascriptnext.jsaws-amplify

Troubles arising from React component integration with Gatsby JS

As I dive into creating a stunning portfolio website with Gatsby js, I encountered an issue while trying to integrate the card component from the gatsby-plugin-material-ui package. The card resides in a separate file within my components directory and is e ...

javascriptreactjsmaterial-uigatsbygatsby-plugin