Editing rows directly within the ng table interface

Hey there,

I'm currently working on implementing inline row editing using ng table

After clicking the edit icon and changing values, I encounter an error upon clicking the save icon:

TypeError: Cannot read property 'untrack' of undefined

For a detailed look at the code, please check out the following Plunker link: Inline row edit using ng table for detailed coding examples

<table
        class="alignment table table-striped table table-bordered table-hover table-condensed editable-table demoTable"
        ng-table="tableParams" ng-show="showTable" ng-form="tableForm"  demo-tracked-table="tableTracker">
        <colgroup>
        <col width="45%" />
        <col width="45%" />
        <col width="10%" />

    </colgroup>

    <tr ng-repeat="row in $data" ng-form="rowForm" demo-tracked-table-row="row">

        <td data-title="'INR Rate'" ng-switch="row.isEditing" ng-class="inrRate.$dirty ? 'bg-warning' : ''" ng-form="inrRate" demo-tracked-table-cell>
            <span ng-switch-default class="editable-text">{{row.INRRate}}</span>
            <div class="controls" ng-class="inrRate.$invalid && inrRate.$dirty ? 'has-error' : ''" ng-switch-when="true">
                <input  type="number" name="inrRate" ng-model="row.INRRate" class="editable-input form-control input-sm" required />
            </div>
        </td>

javascriptangularjsngtable

Answer №1

I encountered the same issue, but after exploring the sample code thoroughly, I was unable to find a solution. Eventually, I decided to tweak the code and it has been working perfectly ever since.

  1. Avoid using "ngTableSimpleList" as it is simply a data set for the table defined by the author in the sample code.
  2. It appears that removing tableTracker.untrack(row) does not impact the functionality of the code.

  3. However, when 

    var originalRow = resetRow(row, rowForm);
    returns a nil value, it prevents the correct recovery of the value due to the asynchronous nature of _.findWhere. To address this, I replaced it with a for loop. 

    function resetRow(row, rowForm) {
    row.isEditing = false;
    rowForm.$setPristine();
    //self.tableTracker.untrack(row);
    for (let i in originalData){
        if(originalData[i].id === row.id){
            return originalData[i]
        }
    }
    //return _.findWhere(originalData, function(r) {
     //   return r.id === row.id;
    //});
}

Answer №2

It appears that you mistakenly injected NgTableParams instead of ngTableParams. Here is a link to a working example for reference: fixed example

demoController.$inject = ["ngTableParams", "ngTableSimpleList", "$scope"];

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

The property being set in Angular is undefined, causing an error

I am struggling to understand why the code below is not functioning as intended: Main.html <div class="MainCtrl"> <h1>{{message.test}}</h1> </div> Main.js angular.module('myApp') .controller('MainCtrl', f ...

javascriptangularjs

Is it normal for Tailwind animation to loop twice when transitioning between pages in Next.js?

I'm currently utilizing react-hot-toast for displaying alerts and animating them during page transitions. The animation involves a double fade-in effect when transitioning between pages. In my project, I've integrated tailwindcss-animate within ...

javascriptreactjsanimationnext.jstailwind-css

Utilize the JavaScript .send function to pass an array

Can an array be passed to a PHP page using the code below? If not, what modifications are needed in the code? function ajax_post(){ var hr = new XMLHttpRequest(); hr.open("POST", "get_numbers.php", true); hr.setRequestHeader("Content-type", "a ...

javascriptphparraysjson

Implementing momentLocalizer with moment.js in react-big-calendar alongside fullcalendar.js

I'm currently working with react-big-calendar and I require assistance in setting up localization as per the example provided on GitHub. import BigCalendar from 'react-big-calendar'; import moment from 'moment'; BigCalendar.setLo ...

javascriptreactjsmomentjs

"Enjoy seamless page transitions with SPA implemented using AngularJS, where navigation occurs without any

I recently developed a small SPA application using Angularjs and Bootstrap. I followed all the specifications provided by Angular's website and other resources online. In order to dynamically include other pages in the main page, I utilized ng-view. ...

angularjssingle-page-applicationng-view

What is the best way to link JavaScript files from a Grails plugin in a separate Grails application?

I have developed a unique plugin that offers multiple Grails controllers and domain objects. Additionally, I have created several AngularJS UI components that I wish to utilize in various other projects. These specific files are located within the web-app ...

javascriptangularjsgrailsgspgrails-resources-plugin

Error in Next.js: .env variable not defined

I recently transitioned my project from React to Next.js and encountered an issue where my environment variables are showing as undefined, even though they were functioning correctly in React. Can someone provide some guidance or assistance with this probl ...

javascriptreactjsnext.jsnext.js13

Assign the value of ng-options based on the AJAX string value

There are two select menus on this page that receive data through AJAX JSON after the page loads. They are related to each other and structured like this: <select name="category" id="category" ng-model="category" ng-options=" ...

angularjsselectangular-ngmodelng-options

I must first log a variable using console.log, then execute a function on the same line, followed by logging the variable again

Essentially, I have a variable called c1 that is assigned a random hexadecimal value. After printing this to the console, I want to print another hex value without creating a new variable (because I'm feeling lazy). Instead, I intend to achieve this t ...

javascriptstringhex

Is there a way to verify the availability of an authenticated resource without triggering a pop-up for credentials in the browser?

I am facing the challenge of fetching data from a web service located on a different server without knowing if the user has an active session on that server. If the user does have a session, I want to retrieve the data automatically. However, if they do no ...

javascripttypescript

Connecting JSON objects based on unique GUID values generated

I am in search of a method to automate the laborious task of linking multiple JSON objects with random GUIDs. The JSON files are all interconnected: { "name": "some.interesting.name", "description": "helpful desc ...

javascriptpythonjsonnpmawk

What is the process for signing out of Facebook within a Cordova Ionic app?

I followed the tutorial located at https://github.com/nraboy/ng-cordova-facebook-example but it does not include a function for logging out. I tried to implement the logout function by adding the following code: facebookExample.controller("LogoutControlle ...

androidangularjsfacebookionic-frameworkcordova-plugins

javascript loop that runs on every second element only

After completing an ajax query, the following JavaScript code is executed. All of my images are named "pic". <script type="text/javascript> function done() { var e = document.getElementsByName("pic"); alert(e.length); for (var i = 0; ...

asp.netjavascriptajaxloopsgetelementsbyname

Assigning the href attribute dynamically

How can you dynamically set the href attribute of the <a> tag using jQuery? In addition, what is the method for retrieving the value of the href attribute from the <a> tag with jQuery? ...

javascriptjqueryhtml

What is the best way to create a mirrored effect for either a card or text using CSS

Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered? The HTML code is included belo ...

javascripthtmlcss

Exploring the Differences between Slim Framework's Currying and Dependency Injection

Frameworks like Angular allow for injecting services and controllers into each other, as shown in the code snippet below: App.controller('exampleController', function($scope, ajaxService){ ajaxService.getData().then(function(data) { ...

javascriptphpangularjsdependency-injectionslim

Prisma encountered an error with the database string: Invalid MongoDB connection string

I'm encountering an issue with my MongoDB data provider, as I am informed that my connection string is invalid. The specific error message states: The provided database string is invalid. MongoDB connection string error: Missing delimiting slash betw ...

javascriptmongodbnext.jsprisma

Encountering a minimatch problem during the ionic installation process

I recently installed nodejs version 7.3.0 and encountered an error while trying to install Ionic using the CLI: npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue After researching, I foun ...

angularjscordovaionic-framework

Is it necessary to also include template-only attributes in my controller's definition?

I'm working on a directive template that features a basic toggle variable. <div ng-mouseenter="$ctrl.myToggle = true" ng-mouseleave="$ctrl.myToggle = false"> ... </div> <div ng-if="$ctrl.myToggle"> ... toggled content </div> ...

angularjstypescript

What is the best way to halt a jQuery function when hovering over it?

Currently, I have a jQuery function set up to run on setInterval(). However, I am looking for a way to pause the interval when hovering over the displayed div and then resume once no longer hovering (i.e., continue cycling through the divs). Does anyone ...

javascriptjqueryhoverintervals