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

Question

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

Here is my code

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)
    });

这将检索包含您之前删除的对象的对象列表(因为您没有向服务器发送删除对象的请求)。

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