The Angular Table row mysteriously vanishes once it has been edited

Utilizing ng-repeat within a table to dynamically generate content brings about the option to interact with and manage the table contents such as edit and delete.

A challenge arises when editing and saving a row causes it to disappear. Attempts were made to add values manually to table rows using jQuery, but without success.

You can access the code on Codepen Link.

This is the html page:

<div class="container" ng-app="trial">
   <table class="table table-hover" ng-controller="newTrial">
     <tr>
       <th class="col-md-3">Name</th>
       <th class="col-md-2">Age</th>
       <th class="col-md-5">Description</th>
       <th class="col-md-2">Actions</th>
     </tr>
     <tr ng-repeat="entry in entryList">
       <td ng-hide="edit[$index]">{{entry.name}}</td>
       <td ng-hide="edit[$index]">{{entry.age}}</td>
       <td ng-hide="edit[$index]">{{entry.desc}}</td>
       <td ng-hide="edit[$index]">
         <button class="btn btn-primary" ng-click="editEntry($index)">Edit</button>
         <button class="btn btn-danger" ng-click="deleteEntry($index)">Delete</button>
       </td>
       <td ng-show="edit[$index]">
         <input type="text" class="form-control" ng-value="entry.name" id="nameEdit$index" />
       </td>
       <td ng-show="edit[$index]">
         <input type="text" class="form-control" ng-value="entry.age" id="ageEdit$index" />
       </td>
       <td ng-show="edit[$index]">
         <input type="text" class="form-control" ng-value="entry.desc" id="descEdit$index" />
       </td>
       <td ng-show="edit[$index]">
         <button class="btn btn-success" ng-click="saveEntry($index)">Save</button>
         <button class="btn btn-warning" ng-click="cancelEntry($index)">Cancel</button>
       </td>
     </tr>

   </table>
 </div>

This is the javascript file:

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

app.controller('newTrial', ["$scope", function($scope){
  $scope.edit = [false, false, false];
  $scope.entryList = [
    {
      name: "ABC",
      age: 30,
      desc: "Something he does"
    },
    {
      name: "DEF",
      age: 35,
      desc: "Something he does not do"
    },
    {
      name: "GHI",
      age: 32,
      desc: "Something he is good at"
    }
  ];
  $scope.editEntry = (i) => {
    $scope.edit[i] = true;
  };
  $scope.deleteEntry = (i) => {
    $scope.edit.splice( i , 1 );
    $scope.entryList.splice( i , 1 );
  };
  $scope.saveEntry = (i) => {
    $scope.entryList[i].name = angular.element("nameEdit"+i).val();
    $scope.entryList[i].age = angular.element("ageEdit"+i).val();
    $scope.entryList[i].desc = angular.element("descEdit"+i).val();
    $scope.edit[i] = false;
  };
  $scope.cancelEntry = (i) => {
    $scope.edit[i] = false;
  };
}]);

Answer №1

Why complicate things with excessive code when you can do it simply like this:


 <tr ng-repeat="entry in entryList" >
       <td ng-if="!entry.isEditable">{{entry.name}}</td>
       <td ng-if="!entry.isEditable">{{entry.age}}</td>
       <td ng-if="!entry.isEditable">{{entry.desc}}</td>
       <td ng-if="!entry.isEditable">
         <button class="btn btn-primary" ng-click="entry.isEditable = !entry.isEditable">Edit</button>
         <button class="btn btn-danger" ng-click="deleteEntry(entry)">Delete</button>
       </td>
        <td ng-if="entry.isEditable">
         <input type="text" class="form-control" ng-model="entry.name"  />
       </td>
       <td ng-if="entry.isEditable">
         <input type="text" class="form-control" ng-model="entry.age"  />
       </td>
       <td ng-if="entry.isEditable">
         <input type="text" class="form-control" ng-model="entry.desc"  />
       </td>
       <td ng-if="entry.isEditable">
         <button class="btn btn-success" ng-click="saveEntry(entry)">Save</button>
         <button class="btn btn-warning" ng-click="entry.isEditable = !entry.isEditable">Cancel</button>
       </td>

     </tr>

In your controller

 $scope.deleteEntry = (i) => {
    $scope.entryList.splice( i , 1 );
  };
  $scope.saveEntry = (entry) => {
    //do something here
    entry.isEditable = !entry.isEditable
  };

See demo here

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

Issue with GLTF Loader Trial: Encountering TypeError when trying to resolve module specifier "three". Invalid references detected; relative references must begin with either "/", "./", or "../"

I'm relatively new to working with three.js and I am currently attempting to load a model into my canvas. However, when I import the GLTFLoader, I encounter the error message mentioned in the console above. Despite checking the syntax and relative pat ...

What could be causing the closest() method in my JavaScript code to not locate the nearest class?

I've encountered an issue while dynamically creating new classes with input fields in my project. For some reason, when I try to remove a previous row, nothing happens. Can anyone help me troubleshoot this problem? Here is the JavaScript code that I ...

Buttons are misaligned and do not align on a straight line

Below is the code output: https://i.stack.imgur.com/avhUu.png I am attempting to enhance the symmetry of these buttons. The minus (-) button appears slightly smaller than the plus (+) button even though they have the same padding. I have experimented w ...

Retrieve the IDs of enabled input elements and use them to create variables in jQuery

My objective is to extract and create variables from the IDs of enabled input fields and store them as selector variables. Consider this HTML example: <input type="number" class="numberInput" id="input1"/> <input type="number" class="numberInpu ...

Can state values be utilized as content for Meta tags?

I am looking for a way to display image previews and titles when sharing a page link. In order to achieve this, I am using the Nextjs Head Component. The necessary details are fetched on page load and used as content for the meta attributes. let campaign = ...

no visible text displayed within an input-label field

Currently, I have started working on a multi-step form that is designed to be very simple and clean. However, I am facing an issue where nothing is being displayed when I click on the next arrow. I am puzzled as to why it's not even displaying the te ...

Is the user currently browsing the 'Home screen webpage' or using the Safari browser?

In JavaScript, is there a method to determine if the user has accessed the website from their home screen after adding it to their home screen, or if they are browsing via Safari as usual? ...

bootstrap modal dialog displayed on the edge of the webpage

I am facing an issue with a modal dialog that pops up when clicking on a thumbnail. The JavaScript code I used, which was sourced online, integrates a basic Bootstrap grid layout. The problem arises when half of the popup extends beyond the edge of the pa ...

Background PHP/JS authentication through HTTP

Recently, I developed a PHP website that includes embedded web-cam snapshots which refresh every 2 seconds using JavaScript. For the first camera, I can easily log in using URL parameters like this: cam1-url?usr=usr&pwd=pwd. However, the second camer ...

Smooth carousel navigating through dots

I am currently using the slick carousel from http://kenwheeler.github.io/slick, and I am looking for a way to limit the number of dots to 8 even when there are more than 8 slides. The navigation dots should include arrows on the left and right sides to in ...

The system displayed an 'Error' stating that the variable 'index' is defined in the code but is never actually utilized, resulting in the (no-unused-vars) warning

I have configured eslint and eslint-plugin-react for my project. Upon running ESLint, I am encountering no-unused-vars errors for every React component in the codebase. It seems like ESLint is not properly identifying JSX or React syntax. Any suggestions ...

Using jQuery to apply the "a" class with the addClass method

The html structure below is giving me trouble: <div class="sub"> <a href="#" id="people">People</a> </div> The CSS for the "a" element is as follows: color:#999999; font-size:31px; I am attempting to use jQuery to change ...

Creating fixed values in HTML

I need to maintain consistency in the headings of multiple tables spread across 3 HTML pages. The heading structure is as follows: <thead> <tr> <th>MyHeading</th> </tr> </thead> My goal is to store the string MyHeadin ...

form submission issue with return false not working

Despite my efforts, the form still redirects to the page. I've been awake since 1AM trying to troubleshoot this issue! Please assist! function del_entry() { $('.delete_deal').submit(function() { var $g = $(this); ...

Create a Vue JS component that enables the rendering of checkbox inputs and sends the selected values back to the

I am working on a Vue JS project where I am creating a custom component to display multiple checkboxes on the page. The challenge I am facing is sending back the value to the component in order to attach a v-model to it. Currently, all my checkboxes allow ...

Error: The value for $regex must be in the form of a string

Encountering a problem with an error in the Console: { [MongoError: $regex has to be a string] name: 'MongoError', message: '$regex has to be a string', waitedMS: 0, ok: 0, errmsg: '$regex has to be a string', code ...

Converting numbers in React Native, leaving only the last four digits untouched

When mapping biomatricData.ninId, the value I am receiving is "43445567665". biomatricData.ninId = 43445567665 My task now is to display only the last 4 digits and replace the rest with "*". I need to format 43445567665 as follows: Like - *******7665 ...

Ensure you have the right zoom in and out percentages to properly test how your website responds on various browsers across different

Currently, I am using Google Chrome to test the responsiveness of a web application that I am developing. As of today, my browser versions are as follows: Google Chrome - Version 88.0.4324.96 (Official Build) (64-bit) Mozilla Firefox - Version 84.0.2 (64- ...

Transform js into a more dynamic format to avoid redundancy when displaying items upon click

I came across a simple lightbox code snippet, but it's based on IDs and I plan to use it for more than 20 items. I don't want to manually write out 20 JavaScript lines when there could be a more efficient way to handle it dynamically. My JS skill ...

Adding automatic hyphens in dates within React

My goal is to create a date field in React, similar to the one on this page, with the date format of yyyy/mm/dd. This is my current approach: const [date_of_birth,setDateofBirth] = useState(""); const handleChangeDOB = (e) => { let value = e.target ...