[英]Confirm user from a remote api url in AngularJS?
所以,我的代码中有这个错误,我无法弄清楚。 因此,我的应用程序需要做的就是单击确认按钮,以将该用户从远程api网址内的列表中删除。 因此,当我单击确认按钮时,它将用户从console.log中删除,但不会更新视图。 因此,请查看我的代码,感谢您的帮助。
如果您正在访问我的小插曲,请在此处写评论,这样我就可以知道错误已在哪里修复。 谢谢你的时间。
这是一个完整的插件: https ://plnkr.co/edit/nWFi81KannLcQfratr0t
PS:在plunker中,有一个UI-Bootstrap需要它与之配合使用,但是plunker并未与它一起运行,因此,我有UI-Bootstrap的评论。
这是一些代码
$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)
});
}
});
不会删除用户,因为您是从客户端删除它的,但是您没有使用更改更新服务器,因此在删除之后,页面将再次从服务器重新加载数据,这将是完整的阵列。
您应该将此删除的用户发送回服务器注意:您删除的UI-Bootstrap
会阻止模式注入,但是我可以看到该值抛出了console.log
这是一个完整的示例,我在视图中使用了bootstrap framework
来处理确认对话框。
当用户单击某个项目时,我们应在此示例中将其选择为目标,并通过
$scope.selectUser()
函数检测目标,此后,当确认删除后,我们通过检测target
的index
从array
splice
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">×</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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.