按鈕不會從用戶行中刪除用戶。 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方法。