Having trouble dynamically assigning the ng-model attribute

Question

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>

javascript angularjs

Answer 1

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 || ''));

    //....
};

Answer 2

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 || ''));

    //....
};

Having trouble dynamically assigning the ng-model attribute

Answer №1

Similar questions

AngularJS will not reload the page when the link clicked has the same URL as the current page

What is the best way to define a variable that captures and logs the values from multiple input variables?

Fetch data dynamically upon scrolling using an AJAX request

I want to add an LI element to a UL by utilizing jQuery in forms.js

Tips for using an array as a jQuery selector in JavaScript

What are the steps to execute a filter operation on a table by utilizing two select box values with jQuery?

Finding a JSON file within a subdirectory

enigmatic issue arising in Angular/Node

Keeping Chart.JS Up to Date: Updating Only Fresh Data

Watchman encountered an error upon initialization

Incorporate a line break into a document using JavaScript

Exploring the function.caller in Node.js

Managing Asynchronous Operations in Vuex

I keep encountering an attach() error every time I try to close a modal that contains a vee-validated form

The previous successful execution of req.body is now yielding an undefined value

The Express Validator is unable to send headers to the client once they have already been processed

Error: Firebase Cloud Functions reference issue with FCM

Organizing AngularJS Data by Initial Letter with the <select></select> HTML Element

Tips for automatically scrolling mat-select option to the top when mat-select is closed

Exploring the concept of inheritance and nested views within AngularJS