AngularJS:将数据从列表传递到模态
发布时间:2020-12-17 06:52:29 所属栏目:安全 来源:网络整理
导读:我目前正在学习如何从头开始构建MEAN webapp.东西很顺利,直到这一点,但现在我坚持尝试通过ng-click = updatePerson(人)将数据从我的列表(ng-repeat)传递到我的模态.我完全不知道为什么我无法访问列表中的数据.我尝试了20种变体来连接两个范围之间的数据而没
我目前正在学习如何从头开始构建MEAN webapp.东西很顺利,直到这一点,但现在我坚持尝试通过ng-click = updatePerson(人)将数据从我的列表(ng-repeat)传递到我的模态.我完全不知道为什么我无法访问列表中的数据.我尝试了20种变体来连接两个范围之间的数据而没有任何成功.
这是我的控制器: angular.module('userCtrl',['userService','ui.bootstrap']) .controller( 'userController',function(User,$uibModal,$log,$scope) { var vm = this; User.all().success( function(data) { vm.users = data; }) vm.deleteUser = function(id) { User.delete(id).success(function(data) { User.all().success(function(data) { vm.users = data; }); }); }; vm.createUser = function() { User.create(vm.userData).success(function(data) { vm.userData = {}; User.all().success(function(data) { vm.users = data; }); }); }; vm.updateUser = function(selectedUser) { $scope.selectedUser = selectedUser; var modalInstance = $uibModal.open({ animation: true,templateUrl: 'app/views/pages/modal.html',resolve: { user: function () { return $scope.selectedUser; } } }); modalInstance.result.then(function(selectedUser) { $scope.selected = selectedUser; }); }; }); 我的角度路由器: angular.module('appRoutes',['ngRoute']) .config(function($routeProvider,$locationProvider) { $routeProvider .when('/',{ templateUrl : 'app/views/pages/home.html',controller : 'userController',controllerAs : 'user' }) .when('/users',{ templateUrl : 'app/views/pages/user.html',controllerAs : 'user' }); $locationProvider.html5Mode(true); }); 我的列表: <div class="btn-group"> <button type="button" class="btn-lg btn-default glyphicon glyphicon-plus" data-toggle="modal" data-target="#createModal"></button> <table class="table table-nonfluid table-bordered table-striped" ng-show="user.users"> <thead> <tr> <th></th> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr ng-repeat="person in user.users"> <td><button ng-click="user.deleteUser(person._id)" class="btn btn-default btn-lg glyphicon glyphicon-trash"></button></td> <td>{{person.firstname}}</td> <td>{{person.lastname}}</td> <td>{{person.mail}}</td> <td><button ng-click="user.updateUser(person)" class="btn btn-default btn-lg glyphicon glyphicon-trash"></button></td> <!--<td><button class="btn-lg btn-default glyphicon glyphicon-option-horizontal" data-toggle="modal" data-target="#updateModal"></button> </td>--> </tr> </tbody> </table> <!--Create Modal--> <div class="modal fade bs-example-modal-lg" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog" 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="exampleModalLabel">Neue Person</h4> </div> <form id="form1" ng-submit="user.createUser()"> <div class="modal-body"> <div class="form-group"> <label for="recipient-name" class="control-label">Vorname</label> <input type="text" class="form-control" ng-model="user.userData.firstname"> </div> <div class="form-group"> <label for="recipient-name" class="control-label">Nachname</label> <input type="text" class="form-control" ng-model="user.userData.lastname"> </div> <div class="form-group"> <label for="recipient-name" class="control-label">E-Mail</label> <input type="text" class="form-control" ng-model="user.userData.mail"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Schlie?en</button> <button id="button1" type="submit" class="btn btn-primary">Person erstellen</button> </div> </form> </div> </div> </div> </div> <script type="text/javascript"> $('#button1').click(function() { $('#createModal').modal('hide'); }); </script> 这是我的模态: <div class="modal-content bs-example-modal-lg" role="dialog document"> <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="exampleModalLabel">?ndere Person</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="recipient-name" class="control-label">Vorname</label> <input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.firstname}}> </div> <div class="form-group"> <label for="recipient-name" class="control-label">Nachname</label> <input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.lastname}}> </div> <div class="form-group"> <label for="recipient-name" class="control-label">E-Mail</label> <input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.mail}}> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Schlie?en</button> <button id="button1" type="submit" class="btn btn-primary">Person ?ndern</button> </div> </div> 解决方法
您正在解析的用户将不会自动绑定到视图.你需要一个控制器来做到这一点.您可以使用下面的代码,也可以使用controllerAs,但是您必须相应地更新模态的HTML.
vm.updateUser = function(selectedUser) { $scope.selectedUser = selectedUser; var modalInstance = $uibModal.open({ animation: true,resolve: { user: function () { return $scope.selectedUser; } },controller: function($scope,user) { $scope.user = user; } }); modalInstance.result.then(function(selectedUser) { $scope.selected = selectedUser; }); }; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |