確認ボタンでユーザーがリストから削除されませんか？ AngularJS

Question

私は1ページにユーザーのリストを持っているWebアプリケーションを作成しています.3番目のボタンを使用して2番目のページにそのユーザーのフォームがあります。ただし、確認ボタンがクリックされたときに、ユーザーがリストから削除されるようにする確認ボタンがあります。私はそれを実装しましたが、何らかの理由で確認ボタンが動作していません。

ここは私のコードです。

<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()" 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>Basic Info</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("UserPortal", ['ngRoute', 'ui.bootstrap' ]); 


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


    $scope.inactive = true; 

    $scope.confirmedAction = function() { 

    isConfirmed.splice($scope.person.id, 1); 

    location.href = '#/user'; 






    } 

    }); 


     app.directive('confirmClick', ['$q', 'dialogModal', function($q, 
     dialogModal) { 
     return { 
     link: function (scope, element, attrs) { 
      // ngClick won't wait for our modal confirmation window to 
      resolve, 
      // so we will grab the other values in the ngClick attribute, 
      which 
      // will continue after the modal resolves. 
      // modify the confirmClick() action so we don't perform it again 
      // looks for either confirmClick() or confirmClick('are you 
      sure?') 
       var ngClick = attrs.ngClick.replace('confirmClick()', 'true') 
       .replace('confirmClick(', 'confirmClick(true,'); 

      // setup a confirmation action on the scope 
      scope.confirmClick = function(msg) { 
       // if the msg was set to true, then return it (this is a workaround to make our dialog work) 
       if (msg===true) { 
        return true; 
       } 
       // msg can be passed directly to confirmClick('Are you sure you want to confirm?') 
       // in ng-click 
       // or through the confirm-click attribute on the 
       // <a confirm-click="Are you sure you want to confirm?"></a> 
       msg = msg || attrs.confirmClick || 'Are you sure you want to confirm?'; 
       // open a dialog modal, and then continue ngClick actions if it's confirmed 
       dialogModal(msg).result.then(function() { 
        scope.$eval(ngClick); 
       }); 
       // return false to stop the current ng-click flow and wait for our modal answer 
       return false; 
      }; 
     } 
    } 
}]) 

/* 
Modal confirmation dialog window with the UI Bootstrap Modal service. 
This is a basic modal that can display a message with yes or no buttons. 
It returns a promise that is resolved or rejected based on yes/no clicks. 
The following settings can be passed: 

message   the message to pass to the modal body 
title   (optional) title for modal window 
okButton  text for YES button. set false to not include button 
cancelButton text for NO button. ste false to not include button 

*/ 
.service('dialogModal', ['$modal', function($modal) { 
    return function (message, title, okButton, cancelButton) { 
     // setup default values for buttons 
     // if a button value is set to false, then that button won't be included 
     cancelButton = cancelButton===false ? false : (cancelButton || 'No'); 
     okButton = okButton ===false ? false : (okButton || 'Yes'); 

     // setup the Controller to watch the click 
     var ModalInstanceCtrl = function ($scope, $modalInstance, settings) { 
      // add settings to scope 
      angular.extend($scope, settings); 
      // yes button clicked 
      $scope.ok = function() { 
       $modalInstance.close(true); 
      }; 
      // no button clicked 
      $scope.cancel = function() { 
       $modalInstance.dismiss('cancel'); 
      }; 
     }; 

     // open modal and return the instance (which will resolve the 
      promise on ok/cancel clicks) 
     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 the modal instance 
     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; 



      isConfirmed = $scope.userInfo; 

      console.log($scope.person); 

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

Answer 1

あなたはNGクリックで複数の機能をトリガしたい場合は、それらをseparete sould。ない& &

変更この

ng-click="confirmClick() && confirmedAction()" 

ng-click="confirmClick(); confirmedAction()" 

更新

MyCtrlがにHomeControllerの範囲内にある場合には、そのコントローラがにHomeControllerから継承しています。 つまり、$scope.userInfoはMyCtrlsのスコープで利用できるようになります。

その後、NG-クリックイベント

に人を追加する方法に

$scope.confirmedAction = function(person) { 

    $scope.userInfo.users.splice(person.id, 1); 
    location.href = '#/user'; 
}; 

を現在のユーザーを渡し、あなたは二つのこと

最初に行う必要があり、ユーザーの配列から人を削除するには

ng-click="confirmClick(); confirmedAction(person);"