# Changing data with the Angular way

It's quite simple. You just need to do it like usual, ie you just need to deal with your array of data.

However, take in mind that when updating the array of data, the whole DataTable is completely destroyed and then rebuilt. The filter, sort, pagination, and so on... are not preserved.

<tabset>

ID | FirstName | LastName |
{{ person.id }} | {{ person.firstName }} | {{ person.lastName }} |

ID | FirstName | LastName |
{{ person.id }} | {{ person.firstName }} | {{ person.lastName }} |

angular.module('showcase.angularWay.dataChange', ['datatables', 'ngResource']) .controller('AngularWayChangeDataCtrl', AngularWayChangeDataCtrl); function AngularWayChangeDataCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder) { var vm = this; vm.persons = $resource('data1.json').query(); vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers'); vm.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1), DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).notSortable() ]; vm.person2Add = _buildPerson2Add(1); vm.addPerson = addPerson; vm.modifyPerson = modifyPerson; vm.removePerson = removePerson; function _buildPerson2Add(id) { return { id: id, firstName: 'Foo' + id, lastName: 'Bar' + id }; } function addPerson() { vm.persons.push(angular.copy(vm.person2Add)); vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1); } function modifyPerson(index) { vm.persons.splice(index, 1, angular.copy(vm.person2Add)); vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1); } function removePerson(index) { vm.persons.splice(index, 1); } }

data1.json

[{ "id": 860, "firstName": "Superman", "lastName": "Yoda" }, { "id": 870, "firstName": "Foo", "lastName": "Whateveryournameis" }, { "id": 590, "firstName": "Toto", "lastName": "Titi" }, { "id": 803, "firstName": "Luke", "lastName": "Kyle" }, ... ]
</tabset>