Add and remove elements from a single table without affecting ng-repeat array

Question

I use ng-repeat to generate some tables, like this:

<table ng-repeat="table in tables">
  <tr ng-repeat="row in rows">
   <th>
     <a href='#' ng-click="removerow()">remove row</a>
   </th>
  </tr>
  <tr>
    <th>
    <a href='#' ng-click="addrow()">Add row</a>
    </th>
  </tr>
</table>

Now I want to add and remove rows in a single table without affecting the other tables.

dnc253 · Accepted Answer · 2014-05-02 19:53:53Z

1

The UI reflects the model. If you're using the same rows object for all the tables, it will affect all the other tables. If you don't want the rows in the individual tables affecting the other tables, you need to use a different object for your ng-repeat. You can simply create a copy of rows for each table.

answered May 2, 2014 at 19:53

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

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

5 Comments

user3320468 Over a year ago

I'm new to angular and don't know how to do that, I imagine I need to run a for loop on the objects in tables, then crate new row arrays with angularjs.copy?

dnc253 Over a year ago

What does your javascript look like? How are tables and rows set into the $scope?

user3320468 Over a year ago

It creates arrays based on json files: $http.get('tables.json').success(function(data) { $scope.tables = data; });

dnc253 Over a year ago

So, does each table object have a rows property? If that's the case, they already are their own object. ng-repeat="row in rows" won't work though since there's no rows property in the $scope. You just need to reference it from the table property that gets put into the $scope from the 1st ng-repeat. Something like ng-repeat="row in table.rows"

user3320468 Over a year ago

No they don't, but now you got me thinking... Maybe I need to redesign the whole page. Thanks :)

Collectives™ on Stack Overflow

Add and remove elements from a single table without affecting ng-repeat array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related