在 AngularJS 中从远程 api url 确认用户？

Question

所以，我的代码中有这个错误，我不太明白。因此，我的应用程序需要做的是单击确认按钮以从远程 api url 中的列表中删除该用户。因此，当我单击确认按钮时，它会从 console.log 中删除用户，但不会更新视图。所以，请检查我的代码，我将感谢你的帮助。

如果您正在访问我的plunker，请在这里写评论，这样我就可以知道错误在哪里被修复了。谢谢你的时间。

这是一个完整的 plunker：https://plnkr.co/edit/nWFi81KannLcQfratr0t

PS: 在 plunker 中，有一个 UI-Bootstrap 它需要它来使用它，但是 plunker 没有运行所以, 我有评论 UI-Bootstrap.

Here is some code

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





 }
});

Answer 1

用户没有被删除，因为你从客户端删除它，但你没有用更改更新服务器，所以在删除页面后，页面重新从服务器重新加载数据，这将是完整的数组。

您应该将这个删除的用户发送回服务器注意：您删除的 UI-Bootstrap 阻止模态注入，但我可以看到值抛出 console.log

Answer 2

这是我在视图中使用 bootstrap framework 处理确认对话框的完整示例。

When user click on a item we should select it as target in this sample our target detect by $scope.selectUser() function, after that and when delete is confirmed we use splice the target from our array by detect the index of the 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>

在 AngularJS 中从远程 api url 确认用户？

Confirm user from a remote api url in AngularJS?

javascript

api

put

angularjs