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>

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

Developing a personalized loop in handlebars templates

Just starting out with NodeJS and ExpressJS. I'm looking to customize a for loop in order to iterate through data from NodeJS using an index, akin to a non-traditional for loop. Take a look at the code snippet below, extracted from NodeJS, where I re ...

Hide jQuery dropdown when mouse moves away

I am working on designing a navigation bar with dropdown functionality. Is there a way to hide the dropdown menu when the mouse pointer leaves both the navbar menu and the dropdown itself? I have tried using hover, mouseenter, and mouseleave but due to my ...

I'm having trouble pulling images from Firebase into my Vue application

Currently, I am experimenting with a Vue application that requires users to upload an image to Firebase. After the image is successfully uploaded, it should be displayed within an img tag in the template. The issue I am encountering is retrieving the uplo ...

Is it possible to implement a custom sign-in form for AWS Cognito?

Is it possible to replace the AWS Cognito hosted UI with a custom form in my Next.js app that utilizes AWS Cognito for authentication? import { Domain } from "@material-ui/icons"; import NextAuth from "next-auth"; import Providers fro ...

The only thing visible on my project is the homepage, void of any buttons or additional pages

After completing this school project, I believed that everything was done correctly. However, as I faced issues with the code, I decided to seek help and share my app.js and bin section for clarification. Starting it with npm on the localhost as shown in ...

Javascript window.scroll function malfunctioning in some browsers while running in localhost

Check out this codepen link where everything is working, but unfortunately not locally: https://codepen.io/LoudDesignStudios/pen/RwxPJKY <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> < ...

Leveraging AngularJS to fetch data from two distinct JSON files

I am faced with the challenge of incorporating 2 JSON file examples into my project. The format of each file is different, so I am exploring the best approach using an angular controller to handle them effectively. These JSON files are not being fetched fr ...

What distinguishes node from node js?

Following the instructions on https://nodejs.org/en/download/package-manager/, I installed Node.js. Upon checking the current version using: :~/Downloads$ nodejs -v I discovered that I was running v4.2.6, which is an older version. Deciding to update, I ...

Generating elements added at various depths within an HTML document with the help of JavaScript

create_new.append("div") .append("form").merge(update_5) .attr("action", d => d.market) .attr("target","_blank") .style("width","100%") .style("height","282") .append("input").merge(update_5) .attr("type","submit") ...

ng-include once the application has finished loading

Currently, my server is using handlebars to generate the initial HTML page. I would like to include a ng-include in this page to dynamically update the client side. However, every time my application runs, it loads the page and the data-ng-include="templa ...

What could be causing the error message 'Why is 'push' property undefined in React Native?

Within my index.ios.js file, I have the following: renderScene(route, navigator){ return <route.component navigator={navigator} {...route.passProps}/> } as well as render() { return ( <Navigator initialRoute={{name: &a ...

Display a JSON encoded array using Jquery

Within an ajax call, I have a single json encoded array set: $var = json_encode($_SESSION['pictures']); The json encoded array is stored in a variable called "array" When I try to display the contents of "array" using alert, I get this respons ...

Is it possible for an AngularJS Directive to demand itself?

Is it possible for a directive to require itself? Take a look at this example: app.directive('menu', function () { return { restrict: 'E', require: '?^menu', link: function(scope, element, attrs, ctrl) { c ...

There seems to be an issue with Material UI Autocomplete not responding to the onChange value

I am currently developing a project using reactjs and incorporating material ui to create components. One specific component I have utilized is the Autocomplete within a form for event creation in my project. I am encountering an issue where I want the sta ...

How can I effectively display a blank menu item for the SelectField component in Material-UI within a React application?

I am using the select-field component from the material-ui framework version 0.15.4 with React version 15.4.0. I am attempting to add a blank menu-item to the select-field in order to allow for deselecting a value in the dropdown field when clicked. Howeve ...

Exploring the Force-Directed Graph Demo on bl.ocks.org

I don't have much expertise in javascript, jquery, or json. My objective is to create a graph using the force-directed graph example from bl.ock.us. 1) I wrote a python script to generate the necessary json data. 2) I noticed others were us ...

Retrieve data from controller using jQuery Ajax

I am in need of assistance with my HTML form and controller interaction. I require a Boolean result from the controller based on user input. Here is an overview of my current form: <div id="temp"></div> @using (Html.BeginForm("Re ...

Having trouble decoding a cookie received from a React.js front-end on an Express server

When using React js for my front end, I decided to set a cookie using the react-cookie package. After confirming that the request cookie is successfully being set, I moved on to configure the Express server with the cookie parser middleware. app.use(cookie ...

Navigating with Link in React Router DOM v5 to successfully pass and catch data

In the process of developing a basic chat application, I encountered an issue with passing the username via the Link component. Below is the relevant code snippet: <Link to={{ pathname: `/${room}`, state: { the: user } }}> Enter room </Link> ...

Getting the value of a variable within the scope of AngularJS can be achieved by utilizing

I have an ng-repeat directive in my code that displays slides. Here is a snippet of the data: slides = [{ src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_24.jpg", interval: 5000 }, { src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_login-regi ...