disable comment section in angular and update display

Is there a way to revert back to the original view after clicking on the edit button when the view is changed using ng-if? I want to go back by clicking the cancel button.

    <div class="timeline-body">
                <div marked="cmnt.content" class="markdown" ng-if = "editPostComment != $index "  ></div>

                <!--Edit comment-->
                  <div class="commentBox" ng-if = "editPostComment == $index "  >
                    <textarea 
                    rows="10" > {{cmnt.content}}</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="cancel()">Submit</button>
                      <button class="btn btn-primary pull-left cancel-edit" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click = "cancelEdit()">Cancel</button>
                    </div>
                </div>
              </div>
javascriptangularjsmodel-view-controller

Answer №1

If you need to update your route when clicking on edit comment, you can achieve this using JavaScript. Here's how:

$scope.cancel = function(){
    $window.history.back();
}

If the route change depends on the `nf-if` condition, you can modify the value of `editPostComment` to be different from `$index` as shown below:

$scope.cancel = function(editPostComment){
    editPostComment = null;
}

Next, update the cancel button like so:

<button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="cancel(editPostComment)">Submit</button>

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

Detecting button clicks in different views using Backbone.js

In my current setup, I have a main parent view called View.A which is responsible for managing two child views - View.B and View.C. Specifically, View.B contains buttons that trigger events on that view. Configuration View.A View.B view.B.template. ...

javascriptjquerybackbone.js

Trouble displaying REACT.jsx in browser

I'm currently learning React and struggling to get it running smoothly. HTML function Person(){ return ( <div class="person"> <h1>Max</h1> <p>Your Age: 28</p> </div> ); } ...

javascripthtmlreactjs

Endless Loop: AngularJS app.run() Promise caught in infinite cycle

I have a situation in my AngularJS app where I am using app.run() to check if a user is logged in before displaying the site to restrict access to non-registered users. Initially, I faced issues with the isLoggedIn function returning false when reloading t ...

javascriptangularjsnode.jsexpresspromise

A fresh inquiry: jQuery custom plugin callback

Many individuals inquire about plug-ins and callbacks, and after reading numerous posts on the topic, I have managed to create a simple hide/show accordion type plugin for FAQs. While I am pleased with its functionality, as I continue to learn, some aspe ...

javascriptjquerypluginscallback

What is the best way to reset the state in React prior to the render being called?

Whenever I click on a copy icon, a popup is displayed. This happens because the state "showPopup" is set to true upon clicking the copy icon, and the render function recognizes this and shows the popup. The popup will close automatically if I click anywher ...

javascriptreactjsreact-redux

Fixing issue with Vue.js property not consistently triggering events

I have a snippet of HTML code that includes a Vue.js script: <!DOCTYPE html> <html> <head> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="checkbox" :checked="b ...

javascriptvue.js

Encountering infinite loop in Node modules triggering a Catch-22 situation while attempting to use M

I have been working on a project that involves using some customized Node.js modules. I have developed a 'helpers' module that helps with loading various helper methods: /helpers/index.js: var mutability = require('./mutability'), ...

javascriptnode.jsmocha.js

How can you deactivate all form elements in HTML except for the Submit button?

Is there a method available to automatically deactivate all form elements except the submit button as soon as the form loads? This would entail pre-loading data from the backend onto a JSP page while restricting user access for editing. Users will only be ...

javascriptjqueryhtmljsp

What is the best way to call a JavaScript function within a PHP echo statement that outputs a <div> element?

Having trouble echoing this PHP code due to issues with single quotes, causing the HTML to end prematurely. Any suggestions on how to fix this? function button($conn){ $sql = "SELECT * FROM table"; $result= mysqli_query($conn, $sql); while($r ...

javascriptphphtmlcss

Error during Heroku deployment: Module './errors/cast' not found

After utilizing the yeoman angular-fullstack generator to create my app, I customized it to suit my needs. The dist folder was built for deployment on Heroku using the command yo angular-fullstack:deploy heroku. This process sets up a new Heroku app for me ...

node.jsgitangularjsherokuyeoman

Ways to make JavaScript cycle through a set of images

I'm having trouble trying to set up a code that will rotate multiple images in a cycle for an image gallery I'm working on. So far, I've only been able to get one image to cycle through successfully. Any help or suggestions would be greatly ...

javascriptcsshtml

Toggle the opening and closing of React components with a map function using onclick

Implementing an onClick function within a map operation, I am encountering an issue where clicking the onClick button changes the state of all items in the map, instead of just the item clicked. This is being done using the useState hook. const [open, se ...

javascriptreactjsmap-function

Load additional slides in bxslider, monitor when it has reached the last one

I am using a horizontal carousel slider with bxslider, and I have disabled the infiniteLoop feature to prevent the slider from looping. My goal is to fetch additional slides via an AJAX request and add them to the slider once it reaches the end of the cu ...

javascriptjqueryajaxbxslider

Would you like to learn how to extract data from a specific textbox using jQuery and save it to a variable when the textbox is in

Below is a textbox that I am working on: <input type="text" name="company" id="company" required /> I am trying to figure out how to use jQuery to capture the values inside the textbox whenever they are typed or selected. Despite my efforts, I hav ...

javascriptphpjquery

The Express.js feature "app.use() mandates the use of middleware functions"

Currently, I am delving into learning Express.js 4 and Node, but I seem to have hit a roadblock with an error that has me stumped. I'm attempting to utilize the node-sass package to compile my sass code; however, I've encountered obstacles in ge ...

javascriptnode.jsexpresssass

Encountering an Internal Server error with Mongoose in Node.js

My latest project is a web application designed for photo sharing. One particular route in the app is responsible for retrieving and displaying photos from all users in the following array. This is the route: router.get('/getphotos',function(r ...

javascriptangularjsnode.jsexpressmongoose

Webpack is mistakenly duplicating module loading

I've been working on my angular.js application using webpack for building, and came across an interesting issue. Take a look at this simple example: app.js var angular = require('exports?window.angular!angular'), angularMoment = requir ...

angularjswebpackcommonjs

Using the codesnippet feature in CKEditor in combination with highlight.js

I am currently experimenting with implementing the highlight.js library in conjunction with the CKEditor addon called CodeSnippet. Although I have successfully integrated the CodeSnippet addon into my CKEditor, the code is not being properly detected, col ...

javascriptjqueryckeditorhighlight.js

Is your JS code moving forward without waiting for the Promise to get resolved?

I am facing an issue with my application where it is not waiting for the promise to return before executing other code that depends on the data. I have tried using then() but the next code is still being executed before the values are returned. In my setu ...

javascriptnode.js

Identify the most suitable HTTP method within a reusable function for making API requests with Angular's HTTPClient module

I am working on implementing a reusable service to handle requests to my API. Currently, it is functioning as expected, but only for GET requests. This is the current function in use: makeAPIRequest = ({ ...opts }) => { return this.http.get(opts ...

javascriptangulartypescriptrequestangular-httpclient