CODEWITHSUNDEEP
javascriptangularjs
Maddy
Maddy

Reputation: 2060

Unable to set ng-model dynamically

I want to input the data into ArrayINeed as that is the object I am passing back to the API call. Currently, I get undefined for "ConfirmedTrackingReferenceNumbers": Dc.ArrayINeed. I have read multiple posts online and on SO but have not been able to resolve the 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>

Upvotes: 0

Views: 51

Answers (1)

georgeawg
georgeawg

Reputation: 48948

Don't use ng-value and ng-model together.

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

    //....
};

Upvotes: 1

Related Questions