Angular js scope variable (array) changes not reflected in ng-repeat

Question

I am binding a scope variable, an array to ng-repeat div tag (a table basically). When I dynamically add any data to the array, it works! A row is added to the table.

But when I remove an element from the array, the change doesn't reflect on the table. One row should be removed.

Following is the code that I'm working with (Javascript):

    $scope.myfields = [];
    $scope.addField = function () {
        $scope.myfields.push({ "name": "", "type": "", "required": "", "enum": "" });
        console.log("add: " + $scope.myfields.length);
        console.log(JSON.stringify($scope.myfields));
    }

    $scope.removeField = function (index) {
        $scope.myfields.splice(index, 1);
        console.log("remove: " + $scope.myfields.length);
        console.log(JSON.stringify($scope.myfields));
    }

EJS: Please see below!

Weird thing is, In console log, it says that changes are made as expected to $scope variable, only view(table) is not getting updated. And if I don't put "track by $index", add and remove both stops reflecting in table!

Any help appreciated. Thanks!

EDIT 2: The code you have asked for:

<div class="col-md-12">
                    <p style="text-align:center"><strong>DEFINE CUSTOM FIELDS:</strong></p>
                    <br>
                    <div style="text-align:center">
                        Click on '+' button to add custom field:
                        <div class="fa fa-plus-circle" ng-click='addField()'> </div>
                        <div class="fa fa-minus-circle" ng-click='removeField(0)'> </div>
                    </div>
                    <br>
                    <div  data-responsive-table>
                        <table  data-table>
                            <thead >
                            <tr >
                                <th  data-event='sort'>
                                Field Name
                                </th>
                                <th  data-event='sort'>
                                Type
                                </th>
                                <th data-event='sort'>
                                Is Required?
                                </th>
                                <th  data-event='sort'>
                                Enumeration
                                </th>
                            </tr>
                            </thead>
                            <tbody >
                            <tr  data-parent-row ng-repeat="um in dynamicFields track by $index">
                                <td>
                                    <input placeholder="Name" ng-model="um.name" validation="required" >
                                </td>
                                <td>
                                    <select style='height: 45px;'   ng-model="um.type" >
                                        <option value="string">string</option>
                                        <option value="boolean">boolean</option>
                                        <option value="integer">integer</option>
                                    </select>
                                </td>
                                <td>
                                    <select style='height: 45px;'   ng-model="um.required" >
                                        <option  value="true">true</option>
                                        <option value="false">false</option>
                                    </select>
                                </td>
                                <td>
                                    <input placeholder="Enum" ng-model="um.enum" validation="required" >
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

post the code where you invoke removeField() and addField() and where you define dynamicFields array — Karim
– Karim, Commented Apr 4, 2017 at 10:01
How do you trigger your removeField function, via ng-click ? — Thai Duong Tran
– Thai Duong Tran, Commented Apr 4, 2017 at 11:35
Your code looks fine. Show the code where your calling removeField. — Aravind Sivam
– Aravind Sivam, Commented Apr 4, 2017 at 11:35
you are always removing 0 index , I think this may be the issue — Abhisek Malakar
– Abhisek Malakar, Commented Apr 6, 2017 at 10:18

Rahul Arora · Accepted Answer · 2017-04-04 09:53:23Z

1

The variable name in your ng-repeat should be myfields and not dynamicfields

Since in your controller it is $scope.myfields, in your view it should be

ng-repeat="um in myfields track by $index"

answered Apr 4, 2017 at 9:53

Rahul Arora

4,5431 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yash Soni Over a year ago

It was a mistake in editing question, the names are same in the code

Collectives™ on Stack Overflow

Angular js scope variable (array) changes not reflected in ng-repeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related