Having trouble with editing and saving functions; they are currently not operational

I am facing an issue with my AngularJS application which has edit, save, and cancel options. The problem arises when I click on the edit button as I am unable to retrieve the value for editing and saving.

The text fields and dropdowns are provided through the use of ng-transclude.

If anyone has a solution to this problem, please share it with me.

DEMO

HTML

<div ng-controller="LocationFormCtrl">
    <h2>Editors</h2>
    <span ng-repeat="location in location">
        <div class="field">
            <strong>State:</strong>
            <div click-to-edit="location.state"><input ng-model="view.editableValue"/></div>
        </div>
        <div class="field">
            <strong>City:</strong>
            <div click-to-edit="location.city"><select ng-model="view.editableValue" ng-options="loc.city for loc in location"></select></div>
        </div>
        <div class="field">
            <strong>Neighbourhood:</strong>
            <div click-to-edit="location.neighbourhood"><input ng-model="view.editableValue"/></div>
        </div>
        <h2>Values</h2>
        <p><strong>State:</strong> {{location.state}}</p>
        <p><strong>City:</strong> {{location.city}}</p>
        <p><strong>Neighbourhood:</strong> {{location.neighbourhood}}</p>
        <hr>
    </span>
</div>

Answer №1

Experimenting with the code led me to a solution that seems to be effective, especially with text fields. Instead of using ng-show/ng-hide, I utilized ng-if. Check out the updated code on this jsfiddle link: http://jsfiddle.net/T6rA9/1/

If I come across a reason for this setup, I will make sure to update my answer.

Update: Perhaps this revised version is more aligned with your requirements: http://jsfiddle.net/T6rA9/7/

The key distinction here is that instead of saving changes upon clicking save, I opted to revert back to the initial state on cancel. This method is simplified thanks to angular's two-way data-binding feature.

As a result, I have eliminated the use of view.editableValue ng-model directive and stuck to a more conventional approach in handling the fields.

Answer №2

It's important to note that transclusion and isolated scopes may not function exactly as you expect them to. Learn more about this here

If you decide to implement changes, you will notice a clear difference in the behavior.

<div editable-region="data.content"><input ng-model="data.content"/></div>

Answer №3

How about implementing a ngClick function that inserts an input element inside your div with the previously stored value?

<div class="newInput" ng-show="hidden">
   <label> {{ inputValue }} </label>
</div>

<div class="newInput" ng-show="!hidden">
  <input ng-model="inputValue" />
</div>

Also, check out the main.js file:

app.controller('MyCtrl', function($scope) {

  $scope.hidden = true;

  $scope.inputValue = 'Edit me!';

  $scope.addInput = function() {
    $scope.hidden = !$scope.hidden;
  }

});

You can view the demo on Plunker

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

AngularJS is encountering an issue with an unresolved function or method called then()

I'm experiencing an issue with the code I am using, it keeps showing the error message: Unresolved function or method then(). I have included Angular dependencies like angular-route.min.js,angular-resource.min.js, and others in my script. I am using W ...

Elegant Decline of Javascript Functionality - Imported Web Assets

Looking for assistance from experienced JS coders. I'm currently working on a Wordpress website that utilizes jQuery AJAX methods to reload either the entire content area or just the main content section based on different navigation clicks. My aim i ...

Executing several asynchronous functions in Angular 2

I am currently developing a mobile app and focusing on authentication. In order to display data to the user on my home page, I need to connect to various endpoints on an API that I have created. Although all endpoints return the correct data when tested i ...

Ensure prototype is easily accessible within vuex

Within my app.js file, I implemented a functionality to enable translation in Vue: Vue.prototype.trans = string => _.get(window.i18n, string); This feature works perfectly when used in my Vue files: {{ trans('translation.name') }} However, ...

Unexpected date outcomes in JavaScript when using a similar date format

Why is it that the first input produces the correct result, while the second input displays a time that is 5 hours behind? new Date("2000-1-1") Sat Jan 01 2000 00:00:00 GMT-0500 (EST) new Date("2000-01-01") Fri Dec 31 1999 19:00:00 GMT-0500 (EST) How can ...

Keep image height consistent and prevent resizing

I've hit a roadblock while trying to find a solution for this issue. There must be an easy fix that I'm overlooking... The problem arises when viewing the table with flags on a small screen (on mobile) - the image on the left seems to get sligh ...

Strategies to troubleshoot and fix issues in Three.js

My Three.js page needs to be updated from version r42 to r55, and a lot of the API has changed since then. While most of the changes were easy to implement, I am currently facing some difficulty with the JSONLoader. The format has transitioned from JavaSc ...

Type the website address into the browser's address bar

Recently, I've been exploring the possibility of combining two ideas to navigate to a relative URL based on the current URL. While browsing this link, I came across the following code snippet: <script> function myFunction() { var x ...

Why is the promise not returning an integer value, but instead returning undefined?

My validation process includes checking the integrity of the down streaming data to the server and verifying its existence in the database. The code snippet from model.js: const mongoose = require('mongoose'); const User = new mongoose.Schema({ ...

Is utilizing React's useEffect hook along with creating your own asynchronous function to fetch data the best approach

After attempting to craft a function for retrieving data from the server, I successfully made it work. However, I am uncertain if this is the correct approach. I utilized a function component to fetch data, incorporating useState, useEffect, and Async/Awa ...

Run javascript code after the page has transitioned

Struggling to create a dynamic phonegap app with jQuery Mobile, the issue arises when loading JavaScript on transition to a new page. The structure of my index page is as follows: <body> <div data-role="page" id="homePage"> <div data- ...

Display the HTML results within a div using jQuery autocomplete

My goal is to create an autocomplete search box. I have successfully filtered the results when typing in the textbox and verified it in the console as well as the HTML tab window. However, I am facing an issue with displaying the results below the textbox ...

Organizing Vue.js components into separate files for a cleaner view model architecture

Having smooth functionality in a single file, I encountered difficulties when attempting to break up the code into multiple files and bundle it in a .vue file. Below is the final .vue file for simplicity. Here is the HTML file: <!DOCTYPE html> < ...

Transitioning from JavaServer Faces to the AngularJS Framework

My current web application is stable and running smoothly, built using a technical stack that includes Java, Spring, Hibernate, JSF, HTML, WebSphere 9, Gradle, among others. The packaging is in the form of an ear file which is deployed on WebSphere. I am ...

Choosing OnChange JavaScript in Laravel

https://i.sstatic.net/CRQCa.png I am looking to implement a feature where clicking on a dropdown menu will immediately display the corresponding value based on the record ID in the related table. For instance, when selecting "golongan," the "gaji pokok" v ...

Increment numbers using XML elements

In my XML construction process, I start with a base XML and add elements like this: $(xml).find('PARENT').find('CHILDREN').each(function(i){ outputstr += '<lorem id="">' }) As the "parent" object appears mul ...

What makes the comparison between "0" and "" evaluate to false in JavaScript?

The specifications in the ES5 document, specifically clauses 11.9.3.4-5, state: If Type(x) is Number and Type(y) is String, the comparison x == ToNumber(y) should be returned. For cases where Type(x) is String and Type(y) is Number, the comparison ToNu ...

Having trouble getting Apollo Server 2.0 to function properly with the join-monster-graphql-tools-adapter when using an Oracle

In the process of creating a graphql server using expressjs, I have implemented the following code snippet: const express = require('express'); const app = express(); const {ApolloServer} = require('apollo-server-express'); const serv ...

What could be causing the web service's returned data to not show up in the table?

I am utilizing angularjs version 1.6 in my project. My project involves reading data from a web service and I need to showcase the returned data in a table. Below is the http ajax call I'm using: $http.get("../../Services/ReportDepartmentService.as ...

Guide to displaying a partial in the controller following an ajax request

After initiating an AJAX request to a method in my controller, I am attempting to display a partial. Below is the AJAX call I am currently using: $('.savings_link').click(function(event){ $.ajax({ type: 'GET', url: '/topi ...