2017-06-18 4 views
0

だから、私のコードにはこのバグがあります。私はそれを理解できません。だから、私のアプリは、リモートAPI内のリストからそのユーザーを削除するために、確認ボタンをクリックする必要があります。だから、私が確認ボタンをクリックすると、console.logからユーザーが削除されますが、ビューは更新されません。だから、私のコードをチェックしてください、私はあなたの助けに感謝します。AngularJSのリモートapi URLからユーザーを確認しますか?

ここにコメントを書くと、どこにバグが修正されたのか分かります。御時間ありがとうございます。 https://plnkr.co/edit/nWFi81KannLcQfratr0t

PS:plunkerで、それはそれで動作することが必要ですが、plunkerはそれを実行しなかったことをUI-ブートストラップがある、私が持っているコメントのUIここ

がいっぱいplunkerです - ブーツストラップ。ここで

は、あなたがそれがクライアント側を形成削除されているため、ユーザーが削除されていないいくつかのコード

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





} 
}); 

答えて

1

ですが、あなたはしませんでした変更したサーバーを更新してください。そのページを削除すると、サーバーから再度データが読み込まれます。これは完全な配列になります。 UI-Bootstrapあなたは注入からのモーダルを防ぐため削除されますが、私は値がこれは私がでbootstrap frameworkを使用acutlly完全なサンプルであるconsole.log

+1

ありがとうございました!さて、私は何がうまくいかないのか知っています。 –

+0

あなたはplunkerを削除してください、またはapiのURLを削除してください、お願いしますか? –

+1

@SuzyHakobyanもちろん – abdoutelb

1

を投げる見ることができます:

あなたがサーバー お知らせに戻って、この削除をユーザーに送信する必要があります確認ダイアログを処理するビュー。我々はindexを検出することにより、当社のarray からspliceターゲットを使用する確認された場合、削除項目のユーザーのクリックが、私たちは、このサンプルでは、​​ターゲットとして 目標を、それを選択していると 後、$scope.selectUser()機能により検出する必要があります

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>

関連する問題