In my application, I list users in a table through an angular smart table. Now I would like to update the record as soon as I modified it. I cannot find any function with which I can change the user in my rowCollection so that my list displays these changes directly.
This is my Service for receiving my users from the API
services.factory('Users', function($resource) { return $resource('/api/v1.0.0/users/:id', {id: '@id'}, { update: { method: 'PUT' } }); });
This is my list controller to get data from my factory. It also has a delete function. The delete function works fine - it just removes one index from userRowCollection. The API removes it from the database.
app.controller('UsersCtrl', ['$scope', '$resource', 'Users', function ($scope, $resource, Users) { // Defines how many items per page $scope.itemsByPage = 10; // Create a reference object of usersRowCollection for smart table $scope.usersRowCollection = Users.query(); $scope.usersDisplayedCollection = [].concat($scope.usersRowCollection); /** * Function to send a DELETE request to the API * and to remove the row from the table * @param user The row item */ $scope.deleteUser = function (user) { // Send request to the API user.$delete(function () { // Remove this line from the table var index = $scope.usersRowCollection.indexOf(user); if (index !== -1) { $scope.usersRowCollection.splice(index, 1); } }) } }]);
This is my editing controller where I am trying to do the magic. function $ scope.user. $ update () sends the changed data to the API - now I just need to get the changes reflected in the list of my users, to which I redirect through $ state.go ('app.users.list'). (u-router)
app.controller('UsersEditCtrl', ['$scope', '$state', '$stateParams', 'Users', function ($scope, $state, $stateParams, Users) { $scope.updateUser = function () { $scope.user.$update(function () { $state.go('app.users.list'); //console.log($scope.user); //console.log($scope.usersRowCollection); //var index = $scope.usersRowCollection.indexOf($scope.user); //console.log($scope.user.id); // Remove this line from the table var index = $scope.usersRowCollection.indexOf($scope.user); if (index !== -1) { $scope.usersRowCollection.splice(index, 1); } //$scope.user = Users.get({id: $scope.user.id}); //$scope.usersRowCollection.update(); // todo Update the changed entry in the table }); }; // Loads the users json data from the REST Api $scope.loadUser = function () { //console.log('loadUser'); $scope.user = Users.get({id: $stateParams.id}); }; $scope.loadUser(); }]);
This is my HTML - as you can see, I use the st-safe-src attribute. If I understood correctly, it should recognize the changes and reflect them automatically.
<table st-table="usersDisplayedCollection" st-safe-src="usersRowCollection" class="table table-striped"> <thead> <tr> <th>ID</th> <th>NAME</th> <th>EMAIL</th> <th>ACTIVE</th> <th>CREATED_AT</th> <th>Aktionen</th> </tr> </thead> <tbody> <tr ng-repeat="user in usersDisplayedCollection"> <td>{{ user.id }}</td> <td><a href="#" ui-sref="app.users.edit({id:user.id})">{{ user.name }}</a></td> <td>{{ user.email }}</td> <td>{{ user.active }}</td> <td>{{ user.created_at }}</td> <td> <button type="button" confirm-button="deleteUser(user);" confirm-message="Wirklich löschen?" class="btn btn-sm btn-danger"> <i class="fa fa-times"></i> Delete </button> <a href="#" ui-sref="app.users.edit({id:user.id})" class="btn btn-sm btn-warning"> <i class="fa fa-pencil"></i> Edit </a> </td> </tr> </tbody> <tfoot> <tr> <td colspan="7" class="text-center"> <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div> </td> </tr> </tfoot> </table>
Change form:
<form class="form-horizontal" role="form" ng-submit="updateUser()"> <div class="form-group"> <label>ID</label> <input type="text" disabled="disabled" class="form-control" value="{{ user.id }}"> </div> <div class="form-group"> <label for="name">NAME</label> <input type="text" ng-model="user.name" class="form-control" id="name" placeholder="YOUR NAME"> </div> <div class="form-group"> <label for="email">E-MAIL</label> <input type="email" ng-model="user.email" class="form-control" id="email" placeholder="YOUR EMAIL"> </div> <div class="radio"> <label> <input type="radio" ng-model="user.active" name="active" id="active" value="1"> ACTIVE </label> <label> <input type="radio" ng-model="user.active" name="active" id="inactive" value="0"> INACTIVE </label> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <a href="#" ui-sref="app.users.list" class="btn btn-warning">ABBRECHEN</a> <button type="submit" class="btn btn-default">SPEICHERN</button> </div> </div> </form>
So, how can I reflect the changes that I make on the form, immediately after saving to my list?