Reset the changed values doesn't work in other Ctrl (AngularJS)

Question

I'm a bit confused about my problem. In fact I've 2 views and ctrl who are working with a service. First View contains a tablelist with the items which will load from a WebAPI. The service makes requests to the server and provides to order. Also I'm using another service to transfer the selected item row in the other Ctrl. Here's the Code:

View1:

//view1.html
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in namelist" ng-click="open(this.item)">
      <td>{{ item.fname }}</td>
      <td>{{ item.lname }}</td>
    </tr>
  </tbody>
</table>

Ctrl1:

//FirstCtrl
$scope.namelist = reqService.names.query();

$scope.open = function (item) {
  $scope.selectedItem = item;           
  modalService.openDialog($scope.namelist, $scope.selectedItem);
}

HTTP-Service:

//Service for HTTP Requests
testApp.factory('reqService', ['$resource', 'baseUrl', function ($resource, baseUrl) {
    return {
        names: $resource(baseUrl + '/api/name/:Id', {
            Id: '@Id'
        }, {
            'update': {
                method: 'PUT'
            }
        })
    }
}]);

Service for modal dialog:

//Modal dialog service
testApp.factory('modalService', ['$modal', function ($modal) {
    return {
        openDialog: function (namelist, selectedItem) {
            return $modal.open({
                templateUrl: 'views/view2.html',
                controller: 'SecondCtrl',
                resolve: {
                    namedList: function () {
                        return namelist;
                    },
                    selected: function () {
                        return selectedItem;
                    }
                }
            });
        }
    }
}]);

Ctrl2:

testApp.controller('SecondCtrl', ['$scope', '$modalInstance', 'namedList', 'selected', 'reqService', '$http'..., function (...){
   /*copy of the original items*/
   $scope.copyItem = angular.copy(selected);

   $scope.cancel = function () {
      $scope.selected = angular.copy($scope.copyItem);
      $modalInstance.dismiss('cancel');
   }

   $scope.reset = function () {
      $scope.selected = angular.copy($scope.copyItem);
      selected = angular.copy($scope.copyItem); //doesn't work
   }
}

My question is how can I reset the tablelist? When I click on resetBtn, it resets only the form in my modal window but the changes remain in the table list?! I cannot reset the resolve variable "selected".

Interesting problem, you could go for another shared factory that contains the most current state of the tablelist and inject that one in both your controllers. — Michelangelo, Jun 11 '15 at 12:57
@Mikey When I even leave the variable `$scope.selected` in `cancel()` the changes in the list remain, although I have defined the `dismiss('cancel')`. — yuro, Jun 11 '15 at 13:04

score 0 · Answer 1 · edited May 23 '17 at 12:29

It could be a case pass by value|reference.
Read this Is JavaScript a pass-by-reference or pass-by-value language? .

It would be interesting to see how it works if you try to pass a function that reset the value instead.

One possible implementation

Ctrl1:

$scope.open = function (item) {
    $scope.selectedItem = item;           
    modalService.openDialog($scope.namelist, function(e){
        if (e === undefined) {
            return $scope.selectedItem;
        } else {
            $scope.selectedItem = e;
        }
    });
}

Ctrl2 began :

testApp.controller('SecondCtrl', ['$scope', '$modalInstance', 'namedList', 'selected', 'reqService', '$http'..., function (...){
    /*copy of the original items*/
   $scope.copyItem = angular.copy(selected());

   $scope.cancel = function () {
      $scope.selected = angular.copy($scope.copyItem);
      $modalInstance.dismiss('cancel');
   }

   $scope.reset = function () {
      $scope.selected = angular.copy($scope.copyItem);
      selected(angular.copy($scope.copyItem));
   }
}

Ok I know it's dirty but it's just to test the assumption.

Thx for your answer, but it doesn't work correctly. But I think I have a solution. I need only an answer for this question. How can I post a selected object back to an array of objects? For example can I do this `reqService.post({data: selectedItem})` ? — yuro, Jun 11 '15 at 13:25
I might be misunderstanding your question, it is a bit unclear, but I think if you want to post an object to an array of objects you would have to do this: reqService.post([{data: selectedItem}]) — peinearydevelopment, Jun 17 '15 at 04:00

Reset the changed values doesn't work in other Ctrl (AngularJS)

1 Answers1

One possible implementation

Linked