加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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">&times;</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">&times;</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;
    });
};

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读