Using Angularjs to dynamically generate and submit tables

I can't seem to figure out this specific situation

Data:

$scope.MyItem = [
      {
        "__v": 0,
        "myItemId": "55ed819caefe18e81ffbd2d2",
        "itemId": "56fec8abb192c870117ed393",
        "january": 1,
        "february": 1,
        "march": 1,
        "april": 1,
        "may": 1,
        "june": 1,
        "july": 1,
        "august": 1,
        "september": 1,
        "october": 1,
        "november": 1,
        "december": 1,
        "_id": "56fec8abb192c870117ed394",
        "itemName": "apple"
      },
      {
        "__v": 0,
        "myItemId": "55ed819caefe18e81ffbd2d2",
        "itemId": "56fec8bfb192c870117ed395",
        "january": 1,
        "february": 1,
        "march": 1,
        "april": 1,
        "may": 1,
        "june": 1,
        "july": 1,
        "august": 1,
        "september": 1,
        "october": 1,
        "november": 1,
        "december": 1,
        "_id": "56fec8bfb192c870117ed396",
        "itemName": "other"
      }
    ];


    myapp.monthName = [ 
        {text: 'january'},
        {text: 'february'},
        {text: 'march'},
        {text: 'april'},
        {text: 'may'},
        {text: 'june'},
        {text: 'july'},
        {text: 'august'},
        {text: 'september'},
        {text: 'october'},
        {text: 'november'},
        {text: 'december'}
    ];  
    

Below is the table

<form class="form-inline" ng-submit="myapp.updateMyItems()" >

        <tbody>
            <tr ng-repeat="item in MyItem">
                <td>
                    {{item.itemName}}
                </td>
                <td ng-repeat="monthName in myapp.monthName">
                    <input type="number" 
                           ng-model="MyItem[item._id][monthName.text]"
                           value="{{item[monthName.text]}}"
                           >
                </td>                             
            </tr>
        </tbody>

        <button type="submit">Save</button>
    </form>
    

The table shows 2 rows with 12 columns, each with a value of 1. Changing the first semester of the first row to 2 and the second row's last semester to 2 as well, upon form submission I receive the following object:


            myapp.updateMyItems = function() {
                var countryItem = $scope.countryItem;
                console.log(countryItem); // output:

    //          [Object, Object, 56fec8abb192c870117ed394: Object, 56fec8bfb192c870117ed396: Object]
    //
    //          where Object, Object have the same values as "$scope.MyItem" and 
    //          
    //          56fec8abb192c870117ed394 contains
    //              april : 2
    //              february : 2
    //              january : 2
    //              july : 1
    //              june : 2
    //              march : 2
    //              may : 2         
    //          ... except for the last semester, with an exception in July having 1
    //          56fec8bfb192c870117ed396 contains
    //              august : 2
    //              december : 2
    //              february : 1
    //              july : 2
    //              november : 2
    //              october : 2
    //              september : 2       
    //          showcasing the reverse scenario from the previous object
            };  
    

These results are not as expected. Can anyone suggest what might be wrong here within Angularjs?

Answer №1

Your approach to utilizing the model within your input is incorrect; it should be referenced as ng-model="item[monthName.text]". Take a look at my demonstration:

https://jsfiddle.net/x9o92yxp/

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

Transmit data from the Windows Communication Foundation to JavaScript

Looking to invoke the WCF service through JavaScript, utilizing AJAX? Check out this resource: Calling WCF Services using jQuery Here's my query: Is there a method to retain some JavaScript-related data after making a request, and then transmit inf ...

Exploring the features of Vue.js with the code snippet 'ts 1109'

I need some assistance with my code as I seem to have one incorrect answer when using the if statement. The error code that I am encountering is ts1109 and I am not sure why VS Code is showing this. Thank you in advance for any help provided :) var calcu ...

Generating an Array of objects through the use of the each method

Currently, I am in the process of developing a web scraper using node.js along with puppeteer and cheerio. Although I can successfully display the desired strings in the console.log, I am facing challenges in determining if this task is achievable. $(&apo ...

Express displays HTML code as plain text

I am currently facing an issue where I am trying to display an html table on /guestbook.ejs and then redirect it to /guestbook. However, the content of my guestbook.ejs file is being displayed as plain text rather than rendering the HTML code. Below is th ...

Exploring the process of declaring an object within a JavaScript ES6 class constructor

How can I access constructor variables inside static methods in a class when the property is declared as 'static' with 'this' and not accessible? export class Reporter { constructor() { this.jsonReports = path.join(process. ...

Adjust the image size without losing sharpness

I'm currently working on a web application for Minecraft and I am looking for a way to resize someone's skin without losing quality. I believe javascript might be the solution to this issue. ...

What is the easiest way to locate the ID of an iframe embedded within a webpage?

Currently, I am focused on developing small JavaScript/HTML5 ads for a webpage. Each advertisement comes with its own iframe that occupies a specific size and space on the page. In order to accommodate an expandable ad that needs to surpass the predetermin ...

The multiple-choice selection tool is not displaying any choices

I am having an issue with my ng-repeat code in conjunction with the jquery multiple-select plugin. Despite using this plugin for a multiple select functionality, the options generated by ng-repeat are not visible. Below is the code snippet in question: & ...

What causes differences in the resulting width between buttons and inputs as opposed to divs and anchor tags?

Check out this JS Bin: http://jsbin.com/ojiJEKa/1/edit I have a question regarding the different width results of <div> and <a> compared to <input> and <button>, even though they have the same style applied. Can anyone explain why ...

Passing references using a personalized component

So, I've encountered this issue with my code: import MuiDialog from "@mui/material/Dialog"; import { styled } from "@mui/material/styles"; const TheDialog = styled((DialogProps) => ( <MuiDialog {...DialogProps} /> ))(( ...

Utilizing npm/buffer package within a TypeScript module

I'm interested in implementing this NPM package: https://www.npmjs.com/package/buffer I'm unsure about how to convert this line of code into typescript: var Buffer = require('buffer/').Buffer Could you provide me with the correct code ...

Is it possible to assign functions to each keystroke that does not correspond to a specific keybinding in Angular?

In Angular, there are events tied to keybindings or actions like (focus), (blur), (keydown), and more. You can bind specific keybinds to certain keys as well, such as (keydown.enter), (keydown.alt), etc. Is there a method to trigger an event only when it ...

Determining whether a path is absolute or relative: A step-by-step guide

Is there a universal function in node.js that can determine if a given path is absolute or relative? Unlike Windows, which starts with 'C:' or '\', UNIX paths begin with '/'. ...

Checking to see if there are a minimum of two checkboxes selected before inputting the data into the database

I am currently using a combination of HTML, PHP, JavaScript, MySQL, and Wampserver. In my project, I have implemented 3 checkboxes where the user can choose a maximum of two options. Once selected, these choices are then inserted into the database. Initi ...

From where does the require.js file originate?

Currently, I am learning Angular 2 from the tutorial available at https://github.com/pkaul/maven-typescript-example. Once I proceed with the 3rd step (mvn jetty:run), a runnable war folder is generated in the example-webapp/target directory. However, I ha ...

Include an option for whitespace characters when validating a file using regex

My text box has specific criteria for what is considered good or bad input. Examples of good input could include: GoodString GoodString88 99GoodString I want to avoid certain types of bad input, such as: Good*String Good&String However, I do want ...

Encountered issue while jasmine mocking angular $http - Error: describe function does not support a done parameter

I am currently working with an angular factory that looks like this: .factory('widgetFactory', ['$http', function($http){ function getWidgets(){ return $http.get('http://example.com/api/widgets/') .then(function(re ...

Performing a PHP Curl request and an ajax query to an ASP.NET page

I am attempting to send an ajax query to an ASP.NET page. Here is the algorithm I am following: 1. There is a form on my webpage; 2. When the user fills in all the fields, they click the submit button; 3. Upon clicking the submit button, JavaScript sends ...

The error message "TypeError: Unable to access the 'get' property of an undefined vue js object" appeared

Struggling to grasp the concept of vue.js, I am currently navigating my way through understanding how to fetch or call an API. Setting up my index.html and app.js, along with the required packages in the node_modules, has been relatively smooth. However, ...

What is the best way to trigger the opening of a Component upon an onPress event?

One challenge I am facing is implementing a button in my app's Screen that should open a self-made Modal component on the same screen. To achieve this, I have set up a visible state in the screen and created an onPress handler for the button to toggl ...