What is the process of establishing a form in Angular and making modifications to the form without saving it?

Hey everyone, I've created a form that should open when clicking on the "Edit Button". However, when I try to edit the form and click on the "Save" button, it doesn't save the data. Can someone please help me with this issue?

Code

// Here is the code

var app = angular.module('theme', []);

app.controller('portfolioController', function($scope) {
  $scope.portofoliosBox = [{
    title: "Finance Projects",
    description: "# of projects Count Sum Aggregate 1"
  }, {
    title: "Marketing Projects",
    description: "# of projects Count Sum Aggregate 2"
  }, {
    title: "Finance Projects",
    description: "# of projects Count Sum Aggregate 3"
  }, {
    title: "Marketing Projects",
    description: "# of projects Count Sum Aggregate 4"
  }, {
    title: "Finance Projects",
    description: "# of projects Count Sum Aggregate 5"
  }];

  $scope.editFormPortFolio = function(portfolioBox) {
    editFormPorfolio = true;
    portfolioBox.title = portfolioBox.title;
    portfolioBox.description = portfolioBox.description;
  }


});

HTML Code

<body ng-app="theme">
    <div ng-controller="portfolioController">
                        <div  ng-repeat="portfolioBox in portofoliosBox">
                        <button ng-click="editFormPorfolio=true" ng-show="!editFormPorfolio">Edit Button</button>
                            <h5 ng-show="!editFormPorfolio">{{portfolioBox.title}}</h5>
                                <p ng-show="!editFormPorfolio">{{portfolioBox.description}}</p>


                                <form ng-show="editFormPorfolio" ng-submit="editFormPortFolio(portfolioBox)">
                                <label class="edit-pencil">
                                    <button>Save</button>
                                    <input type="submit" ng-show />
                                </label>
                                <input type="text" ng-model="portfolioBox.title" />
                                <textarea row="5" cols="" ng-model="portfolioBox.description"></textarea>
                            </form>

                    </div>


  </body>

Demo

Answer №1

Utilize the "edit" attribute within portfolioBox

portfolioBox.edit = true

Then, upon saving,

portfolioBox.edit = false

http://example.com/edit/abc123

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

Creating a table with a static first column and vertical text positioned to the left of the fixed column

To create a table with the first column fixed, refer to this fiddle link: http://jsfiddle.net/Yw679/6/. You also need a vertical text to be positioned to the left of the fixed column in a way that it remains fixed like the first column. The disparities be ...

Unique styles and scripts for a custom login portal

Just beginning with angularjs and diving into a project. Using ui.router for handling various views. Encountering an issue where I have a main page index.html, all my views load in <div ui-view=""></div>. But what if I want to incorporate a log ...

How can I use jQuery to target elements other than the vertical scrollbar when

Here is how I am utilizing the mouseleave jquery event $(document).ready(function(){ $(document).mouseleave(function(event) { //perform a task }); }); Is there any method to prevent this event from triggering when a user scrolls ...

Obtain the markers located within a specified polygon using Leaflet Draw

Is there a way to retrieve all markers within polygons in Leaflet's draw? How do I accomplish this? To create the markers: for (let i = 0; i < addressPoints.length; i++) { var point = addressPoints[i]; var marker = L.marker(new L.LatLng( ...

The attempt to create the property 'and_ff' on the string 'and_chr 89' has failed

Encountering an issue with a Lambda function, I receive an error that does not occur when running the same code within an Express app. I'm puzzled. Data returned by caniuse.getLatestStableBrowsers(); [ 'and_chr 89', 'and_ff 86& ...

Error encountered: Unable to clear Typeahead.JS query due to missing source

Currently, I am attempting to implement Twitter's typeahead.js on a field with the ID of ("#addtags") in order to suggest tags for addition. However, I am encountering an issue where the field retains the value I entered even after selecting a suggest ...

Enhancing Security with Subresource Integrity in Angular-Cli

Has anyone discovered a way to enable Subresource Integrity with Angular-CLI? I came across this GitHub Pull Request that suggests it may become a feature in the future: GitHub Pull Request. I tried to activate it on the current versions but had no luck. ...

When the button is clicked, Shopify will automatically send an email notification to the Admin

Is there a Shopify API available to send an email to the admin when a button is clicked? Please note, this is not related to a contact form. I am looking for a way to trigger an email to the admin with dynamic information from the page by simply clicking ...

Ensure that only valid numbers can be inputted into an HTML number type field

My input number is as follows: <input type="number" id="quantity" name="quantity" (change)="firstRangePointChanged($event)" > I need to ensure that users cannot input invalid values like --99 (--) instead of ...

What is the best way to implement a calendar view for selecting time periods on an HTML page?

Is there a way to implement a calendar view when clicking on the input box within an HTML page? I am looking to create a function where users can select a time period to generate a file. How can this be accomplished? If possible, could you share some samp ...

Tips for minimizing the size of your RestFull Api response

I have a website that utilizes AngularJS to communicate with an API written in PHP. The API returns JSON results, but I noticed that the server response time is slower than downloading data from the web. Is there a way to change the property names in the J ...

The TypeScript script does not qualify as a module

Just starting out with TypeScript and encountering a simple issue. I'm attempting to import a file in order to bring in an interface. Here's an example: Parent: import { User } from "@/Users"; export interface Gift { id: number; ...

Remove driving directions on Google Maps in AngularJS using ui-gmap

Utilizing AngularJS and the ui-gmap-google-map directive (http://angular-ui.github.io/angular-google-maps/#!/), I've successfully implemented a google map that displays driving routes. However, I'm encountering an issue where the previous route p ...

Transferring complete objects between components in Angular 2

I'm facing an issue where I need to pass an object from one component to another. Within the first component, cinema.component.html, there is a function call that looks like this: <a title="Reserve" (click)="openReservationPage(repertoire)">Re ...

What is the best way to invoke a function in a separate scope in Vue.js?

I'm looking to implement a search feature on my website using Vue.js 2 and Laravel. However, I am facing an issue as the search form is not located in the same place as the Vue template. header.blade.php <form action="javascript:void(0);" method= ...

The Access-Control-Allow-Headers does not permit the use of the x-access-token in the request header field

I really need some assistance to resolve this error. The XMLHttpRequest is giving me trouble. The Request header field x-access-token is not permitted by Access-Control-Allow-Headers. ...

My JavaScript computations are not functioning as expected

Below is the Javascript code I am using: $(".myCorOpt").change(function () { var $corporateA = $("#corporateA").val(); var $corporateB = $("#corporateB").val(); var $corporateE = $("#corporateE").val(); var $corElevators = Math.ceil($corp ...

Angular ui-router redirection without altering the ui-view contents

Here's the code snippet from my app.js: // Setting up states using $stateProvider $stateProvider .state('/', { url: "/", views: { "top": { temp ...

Modifying the URL on the fly in Gatsby and React

Is there a method available to dynamically update the URL in the browser without causing a page reload? I have a set of paginated pages where clicking on a different page updates the content without refreshing the entire page, while also scrolling to the ...

What are the best practices for utilizing createHash('sha1') effectively in node.js?

Exploring the intricacies of a login system using React, MySQL, and Node.JS has been an interesting journey. Here's a glimpse of what I've accomplished so far: Presenting my router setup: const express = require('express') const app = ...