Angularjs refreshing after action same page

Question

I'm trying to load a function on a link click, which works perfectly. Then angularjs does its magic until it arrives on the point where it shows the user feedback. I need to refresh the page after deleting an item, but it simply won't refresh.

Here's my href:

<a ng-click="deleteGroup(group.id)" target="_self">
<img src="img/deleteGroupIcon.png" width="45px"/></a>

here's my Controller:

$scope.deleteGroup = function ($groupId) {
    $http({
        method: 'POST',
        url: apiUrl + 'group/delete',
        data: {'groupId': $groupId},  // pass in data as strings
        //headers: {'Content-Type': 'application/x-www-form-urlencoded'}  
        // set the headers so angular passing info as 
        // form data (not request payload)
    })
    .success(function (data) {
        if (!data.success) {
            //$route.reload();
            alert('groep is verwijderd');
        } else {
            $scope.group = data;
            //$state.go('userDetail', {'user_id' : $userId});
        }
    });
};

and my html:

<div class="searchResults" ng-repeat="group in groups | searchForUser:searchString">
<div class="manageGroupWrapper">
    <a class="normal" href="#">
        <div class="newName h3">
            {{group.title}}
        </div>
        <div class="newProfile">
            <img ng-src="{{group.image}}" width="200px"/>
        </div>
        <div class="imageWrapper">
            <a ui-sref="add_group" class="editGroupIcon"><img src="img/editGroupIcon.png" width="50px"/></a>
            <a ng-click="deleteGroup(group.id)" target="_self"><img src="img/deleteGroupIcon.png" width="45px"/></a>
        </div>
    </a>
</div>

Why do you want to refresh the page? Could you give us more of your HTML source? Because, if you're using ng-repeat you could just remove the group which you just deleted from the array which you ng-repeat over and avoid refreshing the page in that way. AngularJS will handle the databinding and remove the group from the view as well. (this is handled by ng-repeat) — leroydev
– leroydev, Commented Dec 15, 2015 at 9:39
Are you using Angular routing or normal web pages (is there a # symbol in your URLs)? The alert is shown? Normally you shouldn't be reloading a page in a Angular application, just update the model — valepu
– valepu, Commented Dec 15, 2015 at 9:39
ui router, yes the alert is shown, if the page is not refreshed, the product is not deleted until i press F5 — Nick Audenaerde
– Nick Audenaerde, Commented Dec 15, 2015 at 9:41
I am using ng-repeat, are there extra steps needed? because right now it does not delete the product until F5 — Nick Audenaerde
– Nick Audenaerde, Commented Dec 15, 2015 at 9:43

Aaron · Accepted Answer · 2015-12-15 09:44:37Z

2

Your $scope.deleteGroup function should remove its target group from the $scope.groups so the content of the ng-repeat is automatically updated and does not display the group anymore.

$scope.deleteGroup = function (group) {
    $http({
        method: 'POST',
        url: apiUrl + 'group/delete',
        data: {'groupId': group.$groupId},  // pass in data as strings
        //headers: {'Content-Type': 'application/x-www-form-urlencoded'}  
        // set the headers so angular passing info as 
        // form data (not request payload)
    }).success(function(data) {
        $scope.groups.splice($scope.groups.indexOf(group));
    });
};

answered Dec 15, 2015 at 9:44

Aaron

24.9k2 gold badges41 silver badges61 bronze badges

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

Comments

Mario Lamacchia · Accepted Answer · 2015-12-15 09:50:33Z

0

To force refreshing the page with uiRouter you can use $state.go(target, params, {reload: true}).

$scope.deleteGroup = function (group) {
  $http({
    method: 'POST',
    url: apiUrl + 'group/delete',
    data: {'groupId': group.groupId},  // pass in data as strings
    //headers: {'Content-Type': 'application/x-www-form-urlencoded'}  
    // set the headers so angular passing info as 
    // form data (not request payload)
  }).success(function(data) {
    // This will reload the current state with the same stateParams
    $state.go($state.current.name, $stateParams, {reload: true});
  });
};

answered Dec 15, 2015 at 9:50

Mario Lamacchia

1,7231 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angularjs refreshing after action same page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related