User315123
User315123

Reputation: 11

Angular Binding field to Dynamic model modifies all values in object

So I have this code in view:

    <div class="form-group" ng-repeat="columnHeader in form.table[fakeForm.currentFormIndex].columns track by $index">
             <label for="">Column <%$index%></label>
             <div class="fg-line">
                    <input type="text" class="form-control"             
                    placeholder="Column Header <%index%>" 
                    ng-model="form['table'][fakeForm.currentFormIndex]['columns'][$index].name"/>
             </div>
    </div>

This targets the 'current active' appended element. But whenever I uses this, it also modifies other appended elements with same attributes even each of those elements has unique key assigned to them.

Look at the image here

Then I'm pushing this data set with a new key.

'columns':[{name:'Column 1'}, {name:'Column 2'}, {name:'Column 3'}],
            'rows':[
                {
                    label:'Row 1',
                    columns:[
                        {
                            label:'Row 1 Column 1'
                        },
                        {
                            label:'Row 1 Column 2'
                        },
                        {
                            label:'Row 1 Column 3'
                        }
                    ]
                },
                {
                    label:'Row 2',
                    columns:[
                        {
                            label:'Row 2 Column 1'
                        },
                        {
                            label:'Row 2 Column 2'
                        },
                        {
                            label:'Row 2 Column 3'
                        }
                    ]
                },
                {
                    label:'Row 3',
                    columns:[
                        {
                            label:'Row 3 Column 1'
                        },
                        {
                            label:'Row 3 Column 2'
                        },
                        {
                            label:'Row 3 Column 3'
                        }
                    ]
                }
            ]

so for example I have two 'table' key, it will look like

table:{
0:....
1:....
}

Upvotes: 1

Views: 60

Answers (0)

Related Questions