Having trouble dynamically assigning the ng-model attribute

I am trying to populate the ArrayINeed array, which is the object I need to pass back to the API call. Currently, I am getting undefined for 

"ConfirmedTrackingReferenceNumbers": Dc.ArrayINeed
. Despite researching various posts online and on SO, I have been unable to resolve this issue.

Controller

.
.
.
var Dc = this;
.
.
.
Dc.FlowerData = function () {
    Dc.ArrayINeed = [];
    if (Dc.Data.validate()) {
        if (isTulipFlower) {
            requestData = {
                "FlowerId": Dc.FlowerId,
                "ConfirmedTrackingReferenceNumbers": Dc.ArrayINeed
                };
.
.
.

HTML

<div ng-repeat="(item, data) in Dc.DataToLoopThrough">
    <div ng-if="item === 'flowers'">
        <div ng-repeat="flowerItem in data">
            <table ng-if="flowerItem.flowerType === 'Tulip'">
                <tr ng-repeat="refNumber in flowerItem.flowerReferenceNumbers">
                    <td ng-if="refNumber.isRequiredForTracking && refNumber.value != null">
                        <input ng-value="refNumber.value != null ? refNumber.value : ''" type="text" />
                    </td>
                    <td ng-if="refNumber.isRequiredForTracking && refNumber.value == null">
                        <input ng-model="Dc.ArrayINeed[$index].refNumber" type="text" />
                    </td>       
                </tr>
            </table>
javascriptangularjs

Answer №1

Avoid using ng-value and ng-model simultaneously.

  <table>
    <tr ng-repeat="refNumber in flowerItem.flowerReferenceNumbers">
        <td class="requirement-td-padding"
            ng-if="refNumber.isSetForTrimming">
            {{refNumber.label}}: &nbsp;
        </td>
        <td ng-if="refNumber.isSetForTrimming">
            <input ̶n̶g̶-̶v̶a̶l̶u̶e̶=̶"̶r̶e̶f̶N̶u̶m̶b̶e̶r̶.̶v̶a̶l̶u̶e̶ ̶!̶=̶ ̶n̶u̶l̶l̶ ̶?̶ ̶r̶e̶f̶N̶u̶m̶b̶e̶r̶.̶v̶a̶l̶u̶e̶ ̶:̶ ̶'̶'̶"̶ ̶
                   ng-model="Dc.ArrayINeed[$index]" type="text" />
        </td>
    </tr>
  </table>

Instead, initialize the model within the controller:

Dc.FlowerData = function () {
    var flowerArr = Dc.DataToLoopThrough.flowers;
    var flowerItem = flowerArr.find(_ => _.flowerType == 'Tulip');
    var refNumberArr = flowerItem.flowerReferenceNumbers;
    Dc.ArrayINeed = refNumberArr.map(_ => (_.value || ''));

    //....
};

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 ng-repeats functionality is triggered multiple times whenever I attempt to make this call

I have a situation where I am using ng-repeat in my Laravel view to call a function from the controller. This function retrieves data from the database, performs some calculations, and then returns an array. However, I am facing an issue where the data is ...

javascriptphpangularjslaravelangularjs-ng-repeat

A fixed header for tables that shifts along with horizontal scrolling

Seeking assistance with a persistent issue - I have a table with a fixed header on vertical scroll (see CSS and Javascript below), but the header fails to move horizontally when I scroll. window.onscroll = functi ...

javascripthtmlcss

What is the best way to retrieve the value from a callback function in the outer scope?

I'm facing an issue with accessing values from a callback function in the parent scope. Essentially, I need to retrieve and use data fetched by the s3.getObject() function in the outer scope (last line). Below is my JavaScript code used for fetching ...

javascriptnode.jsfunctioncallbackclosures

Tips for running an AngularJS1 application on an Nginx server alongside other applications

I have an AngularJS application located in a folder named dist. I want to host this app on my nginx server. Currently, my nginx server is hosting multiple applications using proxy_pass. Since I have never hosted a static HTML app on nginx before, I'm ...

angularjsnginx

Tips for incorporating a JavaScript script into local HTML code

I am facing an issue with my code on jsfiddle. It works perfectly there, but when I try to run it locally, it doesn't seem to work. I have checked the code multiple times and even downloaded the jQuery file to link it, but still no luck. I feel like i ...

javascriptphpjqueryhtml

Counting the number of times a form is submitted using a submit button and storing the data

After researching for a few hours, I've gathered information on different techniques for storing data related to a submit button counter in a text file. <form action="/enquiry.php" method="post" name="form"> <label>Name *</label> &l ...

javascriptphpjquery

JavaScript heap running out of memory after upgrading from Angular 11 to versions 12, 13, or 14

I need assistance with resolving a JS heap out of memory issue that has been occurring when trying to start the local server ever since migrating from Angular 11 to Angular 12 (or 13 or 14, all versions tested with the same problem). This occurs during th ...

javascriptnode.jsangulartypescriptnpm

React treats flat arrays and nested arrays in distinct ways

After some experimentation, I discovered an interesting behavior in React when passing nested arrays. Surprisingly, React renders the items properly without complaining about missing keys on the elements. const stuff = 'a,b,c'; // Nested Array ...

javascriptarraysreactjs

Exploring the internet with Internet Explorer is like navigating a jungle of if statements

I am facing an issue with my code that works well in Chrome, but encounters errors in IE. The if condition functions correctly in Chrome, however, in IE it seems like the first condition always gets executed despite the value of resData. Upon analysis thro ...

javascriptjqueryajaxinternet-explorergoogle-chrome

Is there a way to determine if a browser's network activity is inactive?

Within an angularJS application, a noticeable delay can be experienced between the user and the server (potentially due to limited bandwidth), resulting in a wait time of approximately 2-500ms when loading a new page. I am considering implementing a metho ...

javascriptangularjsajaxweb-applications

To fully utilize the capabilities of WebGL, ensure it is enabled while using the nightwatch.js/selenium

There's a perplexing issue I've encountered while attempting to launch a page containing WebGL content using a nightwatchJS-based framework: When opening the page directly in Chrome, WebGL is properly detected. The Graphics Feature Status in ...

javascriptseleniumwebglselenium-chromedriver

Using PHP and MySQL to handle data submission through the POST method

When I send data to post[submit] and post[request], it's coming from two separate buttons. Even though I successfully submitted user_id to post[submit], I'm encountering difficulty in echoing the user_id in the request portion (post[request]). ...

javascriptphphtmlmysqlcss

What is the best way to condense all JavaScript and CSS files in MEAN.JS for a production setting?

I recently finished creating a basic MEAN.JS application. When using MEAN.JS, I can use the command grunt build to minify the js and css files located in specific folders: css: [ 'public/modules/**/css/*.css' ], js: [ 'public/config ...

javascriptnode.jsmeanjs

Using Jquery to insert an if statement within the .html element

Trying to implement jQuery to replace html content within an object, but struggling with incorporating an if statement. Like this: $(this).html("<select id=\'status\' name=\'status[]\' multiple><option valu ...

javascriptjquery

Find the variance between the sums of columns 3 and 5 using Angular

Is there a method to calculate the variance between column 3 and the last one in a table? <body ng-app="Test"> <section style="margin-top:80px"> <h3>Plastic Calculator Form Version 2.0</h3> <div ng-controller="TestCo ...

javascriptangularjscalculator

The return type of a server-side component in NextJS 14 when it is asynchronous

When using NextJS 14, I encountered a problem with the example provided in the documentation. The example is within the Page component, typically typed as NextPage. However, this type does not support the use of async await server components. In my case, ...

javascriptreactjsnext.js

Issue with capturing mouse position in canvas when hovering over <h1> element above it

I am working on a project using React Three Fiber to animate a 3D model that follows the mouse cursor. However, I have noticed that when the mouse hovers over some divs or headings on top of the canvas element, the animation freezes and becomes choppy unti ...

javascriptreactjsanimationthree.jsreact-three-fiber

Animate an svg icon to follow a designated path as the user scrolls

I am currently working on a project that involves animating a bee svg icon as the user scrolls through the website. The bee starts at the top and fills in a grey color line with pink as the user moves forward, and moves backward as the user scrolls back. Y ...

javascripthtmljquerycss

Numerous Google Gauges featuring varying sets of options

Currently, I am facing a challenge involving the insertion of multiple instances of Google Gauges (or Highchart Gauges) on a single page. The goal is to utilize different option sets and separate their placement accordingly. Unfortunately, the solution pro ...

javascriptjqueryhtmlhighcharts

Is it possible to place Angular Material components using code?

Currently, I'm in the process of creating a responsive Angular application. Is there any way to adjust the height and position of the <mat-sidenav-content></mat-sidenav-content> component in Angular Material programmatically without relyi ...

javascriptcssangulartypescript