Confirm user from a remote api url in AngularJS?

Question

so, I have this bug in my code, that I can't quite figure it out. So, my app needs to do is to click on the confirm button to remove that user from its list within the remote api url. So, when I click on confirm button, it removes the user from console.log but it does not update the view. So, please check out my code and I will be thankful for your help.

if you are visiting my plunker, please write comments here, so I can know where was the bug fixed. Thanks for your time.

Here is a full plunker: https://plnkr.co/edit/nWFi81KannLcQfratr0t

PS: in the plunker, there is a UI-Bootstrap that it need it to work with it, but plunker did not run with it so, I have comment UI-Bootstrap.

Here is some code

       $scope.confirmedAction = function(person) {


        var index = $scope.userInfo.lawyers.map(function(e) {


            return e.id;


        }).indexOf(person.id);
        $scope.userInfo.lawyers.splice(index, 1);
        console.log($scope.userInfo.lawyers);
       //  console.log($scope.userInfo);

        $window.location.href = '#/lawyer';

HomeController

var isConfirmed = false;
app.controller('HomeController', function($scope, people) {
if (!isConfirmed) {
    people.getUserInfo().then(function (response) {

        $scope.userInfo = response.data;

        //console.log($scope.userInfo);




    }, function (error) {
        console.log(error)
    });





 }
});

Answer 1

The user isn't removed because you are removing it form client side but you didn't update the sever with the changes so after the delete the the page is reloading the data again from the server which will be the full array.

You should send this removed user back to server Notice: the UI-Bootstrap you removed prevent the modal from injecting, but i can see the value throw the console.log

Answer 2

This is a full sample acutlly i used bootstrap framework in the view to handle the confirm dialog.

When user click on a item we should select it as target in this sample our target detect by $scope.selectUser() function, after that and when delete is confirmed we use splice the target from our array by detect the index of the target

 var app = angular.module("app", []); app.controller("ctrl", ["$scope", function($scope) { $scope.users = [{ name: "John" }, { name: "Mike" } ]; $scope.selectUser = function(user) { $scope.userIs = user; } $scope.deleteConfirmed = function() { $scope.users.splice($scope.users.indexOf($scope.userIs), 1); } }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div ng-app="app" ng-controller="ctrl"> <br /> <div class="col-lg-4 col-lg-offset-4"> <ul class="list-group"> <li class="list-group-item" ng-repeat="user in users"> {{user.name}} <a data-toggle="modal" data-target="#myModal" class="text-danger pull-right" ng-click="selectUser(user)">Delete</a> </li> </ul> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Delete...</h4> </div> <div class="modal-body"> Are you sure want delete user "{{userIs.name}}"? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" ng-click="deleteConfirmed()" data-dismiss="modal">do it</button> </div> </div> </div> </div> </div>