按钮不会从用户行中删除用户。 AngularJS

Question

我是AngularJS的新手。所以，我创建了一个应用程序，其中有一个用户列表，当单击一个按钮时，需要从列表中删除该用户。用户正在从后端API获取。但是，由于某种原因，当点击“确认按钮”时，用户不会从列表中删除。

这里是我的代码

about.html

<div ng-controller="MyCtrl"> 
<div ng-repeat="person in userInfo.users | filter : {id: userId}"> 

<a class="back" href="#/user">Back</a> 

    <button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive"> 
    Edit 
    </button> 

    <button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button> 

    <a class="delete" ng-click="confirmClick(); confirmedAction($index);" confirm-click>Confirm</a> 



    <div class="people-view"> 

    <h2 class="name">{{person.firstName}}</h2> 

    <h2 class="name">{{person.lastName}}</h2> 

    <span class="title">{{person.email}}</span> 

    <span class="date">{{person.website}} </span> 


</div> 

    <div class="list-view"> 

    <form> 

     <fieldset ng-disabled="inactive"> 

     <legend>Main Users</legend> 

     <b>First Name:</b> 

     <input type="text" ng-model="person.firstName"> 
     <br> 

     <b>Last Name:</b> 

     <input type="text" ng-model="person.lastName"> 
     <br> 

     <b>Email:</b> 

     <input type="email" ng-model="person.email"> 



     <br> 

     </fieldset> 

    </form> 

    </div> 
</div> 
</div> 

App.js

 var app = angular.module("MainPortal", ['ngRoute', 'ui.bootstrap' ]); 



     app.controller('MyCtrl', function($scope) { 


     $scope.inactive = true; 

    $scope.confirmedAction = function(index) { 

    $scope.userInfo.users.splice(index.id, 1); 

    location.href = '#/user'; 





}; 

}); 


app.directive('confirmClick', ['$q', 'dialogModal', function($q, dialogModal) { 
    return { 
     link: function (scope, element, attrs) { 

      var ngClick = attrs.ngClick.replace('confirmClick()', 'true') 
       .replace('confirmClick(', 'confirmClick(true,'); 


      scope.confirmClick = function(msg) { 

       if (msg===true) { 
        return true; 
       } 
      confirm?') 

       msg = msg || attrs.confirmClick || 'Are you sure you want to confirm?'; 

       dialogModal(msg).result.then(function() { 
        scope.$eval(ngClick); 
       }); 

       return false; 
      }; 
     } 
    } 
}]) 


    .service('dialogModal', ['$modal', function($modal) { 
    return function (message, title, okButton, cancelButton) { 

     cancelButton = cancelButton===false ? false : (cancelButton || 
     'No'); 
     okButton = okButton ===false ? false : (okButton || 'Yes'); 


     var ModalInstanceCtrl = function ($scope, $modalInstance, settings) 
      { 

      angular.extend($scope, settings); 

      $scope.ok = function() { 
       $modalInstance.close(true); 
      }; 

      $scope.cancel = function() { 
       $modalInstance.dismiss('cancel'); 
      }; 
      }; 


      var modalInstance = $modal.open({ 
      template: '<div class="dialog-modal"> \ 
       <div class="modal-header" ng-show="modalTitle"> \ 
        <h3 class="modal-title">{{modalTitle}}</h3> \ 
       </div> \ 
       <div class="modal-body">{{modalBody}}</div> \ 
       <div class="modal-footer"> \ 
        <button class="btn btn-primary" ng-click="ok()" ng- 
      show="okButton">{{okButton}}</button> \ 
        <button class="btn btn-warning" ng-click="cancel()" ng- 
       show="cancelButton">{{cancelButton}}</button> \ 
       </div> \ 
      </div>', 
      controller: ModalInstanceCtrl, 
      resolve: { 
       settings: function() { 
        return { 
         modalTitle: title, 
         modalBody: message, 
         okButton: okButton, 
         cancelButton: cancelButton 
         }; 
        } 
       } 
      }); 

      return modalInstance; 
     } 
    }]) 


    app.config(function ($routeProvider) { 
    $routeProvider 
    .when("/user", { 
     controller: "HomeController", 
    templateUrl: "partials/home.html" 
    }) 
    .when("/user/:id", { 
    controller: "UserController", 
    templateUrl: "partials/about.html" 

    }) 
    .otherwise({ 
    redirectTo: '/user' 

    }); 

    }); 

的HomeController

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

     $scope.userInfo = response.data; 



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

UserController中

app.controller('UserController', ['$scope', 'people', '$routeParams', 
    function ($scope, people, $routeParams) { 

     $scope.userId = $routeParams.id; 
     people.getUserInfo().then(function (response) { 
      $scope.userInfo = response.data; 
     }); 
    }]); 

Answer 1

这条线$scope.userInfo.users.splice(index.id, 1);将只从阵列中移除对象。

使用此行location.href = '#/user';您将失去$ scope并自动删除$ scope.userInfo.users，因为您永远不会删除对象。 还行location.href = '#/user';将调用HomeController的 有你有这个调用

people.getUserInfo().then(function (response) { 
    $scope.userInfo = response.data; 
    }, function (error) { 
     console.log(error) 
    }); 

将retrive与对象，你以前删除对象的列表（因为你没有请求发送到服务器上删除对象）。

为了删除对象，您必须执行调用服务器，一些$http.delete方法。