如何在ngDialog中加载数据 [英] How to load data in ngDialog

问题描述

我有一个要求，我需要从jsp页面打开一个对话框，打开对话框时，我需要从服务器（使用AJAX调用）加载一些预填充的数据。如果我在打开对话框之前进行AJAX调用，我会获取数据，但对话框将像新页面一样加载。如果我尝试获取新的控制器中的数据，对话框仍然不反映数据。我应该使用什么来确保对话框反映了我从服务器获取的数据。

 < div class =container -fluidng-controller =EditUserController> 
 
< div class =text-center container-fluid> 
< label class =sub-header>编辑用户：{{userEmail}}< / label> 
< / div> 
 
< form action =editUsermethod =postname =editForm> 
< div> 
< div class =pull-right> 
< label>删除用户< / label>< br> < a href =＃
 class =btn btn-block btn-sm btn-dangerng-click =deleteUser（userEmail）> {{userEmail}}< / a> 
< / div> 
< div> 
< label>更改角色< / label> 
< / div> 
< div> 
< label> 
< input type =checkboxng-model =superVisorname =superVisorFlag
 ng-true-value =1ng-false-value =0value =$ {existingUser.superVisorFlag}> 
设置主管< / label> 
< / div> 
< div> 
< input type =textclass =form-controlng-model =email
 name =emailAddressng-disabled =true
 ng-options = 电子邮件用户电子邮件
 value =$ {existingUser.emailAddress}
 placeholder =输入新的用户电子邮件地址bs-typeahead> 
< / div> 
< div> 
< input type =textclass =form-controlng-model =firstName
 name =firstNamevalue =$ {existingUser.firstName}
占位符=输入名字bs-typeahead> 
< / div> 
< div> 
< input type =textclass =form-controlng-model =lastName
 name =lastNamevalue =$ {existingUser.lastName}
 placeholder =输入姓氏bs-typeahead> 
< / div> 
 
 
< div> 
< a href =＃class =btn btn-sm btn-primaryng-click =saveChanges（）>保存更改< / a> 
< / div> 
< / div> 
< / form> 
 
< / div> 
 
< script type =text / javascript
 src =< c：url value =/ resources / scripts / admin.js/>>< /脚本> 
  

以上是对话框的jsp。以下是我的js文件 -

  var app = angular.module（'scc-admin'，['ngDialog'，'mgcrea .ngStrap']）; 
 app.factory（UserList，function（）{
 var UserList = {}; 
 UserList.data = [{
 userId：111，
 userFirstName： xxx，
 userLastName：yyy，
 userEmail：[e-mail]，
 userRole：Admin
}，{
 userId：222，
 userFirstName：second，
 userLastName：last，
 userEmail：[e-mail]，
 userRole：Manager
}]; 
 return UserList; 
}）; 
 app.controller（'UserSettingsController'，function（$ scope，ngDialog，UserList，$ http）{
 // bashboard list的变量
 $ scope.userList = UserList; 
 $ scope.editUser = function（userEmail）{
 $ scope.userEmail = userEmail; 
 ngDialog.open（{
 template：'editUser'，
 className：'ngdialog- theme-default'，
控制器：'EditUserController'，
 closeByEscape：true，
范围：$ scope 
}）; 
}; 
 
 $ scope.addUser = function（）{
 ngDialog.open（{
 template：'addUser'，
 className：'ngdialog-theme-default'，
 controller： 'addUserController'，
 closeByEscape：true，
范围：$ scope 
}）; 
}; 
 
}）; 
 
 app.controller（'EditUserController'，function（$ scope，ngDialog，$ http）{
 
 ngDialog.template = $ scope.output; 
 ngDialog。 $ modelValue = $ scope.output; 
 
 var responsePromise = $ http.get（initUser？email =+ $ scope.userEmail）; 
 responsePromise.success（function（data，status ，headers，config）{
 $ scope.output = data; 
 console.log（data）; 
}）; 
 console.log（$ scope）; 
 
 $ scope.deleteUser = function（）{
 
 $ scope.cfdump =; 
 
 var str = {emailAddress：$ scope.userForm.emailAddress $ modelValue}; 
 str = JSON.stringify（str）; 
 
 var request = $ http（{
 method：'post'，
 url： deleteUser？formData =+ str，
 data：（{formData：str}）
}）; 
 
 request.success（function（html）{
 alert （成功）; 
}）; 
 
 request.error（function（errmsg）{
 alert（Unable to delete user）; 
}）; 
 
} 
 
}）; 
  

我在用户设置控制器中打开一个对话框，并尝试使用默认数据加载它。我尝试将新对话框的模板设置为AJAX调用的输出，但它没有起作用。我在这里缺少什么？

解决方案

咨询文档，我学到了以下解决方案。对于您而言，它应该适用于您。

将 ngDialog ，您可以如下声明您的 ngDialog 。

  ngDialog .open（{
 template：'my-template.html'，
 className：'ngdialog-theme-plain'，
 data：$ scope.myJSONObject 
}）; 
  

现在，上述部分完成后，您需要在弹出的对话框中绑定数据，所以去并将 ngDialogData.myJSONObjectFieldName 在 ng-model 中。

<考虑下面的例子进一步阐述。我们假设我们有 myJSONObject 如下。

  myJSONObject = {
 first_name：'John'，
 last_name：'Doe'
}; 
  

要在ngDialog的<$中使用 first_name c $ c> ng-model ，只需将 ng-model =ngDialogData.first_name。

I have a requirement where I need to open a dialog from a jsp page and while opening the dialog, I need to load it with some prepopulated data from the server (using an AJAX call). If I make the AJAX call before opening the dialog, I get the data but the dialog loads like a new page. If I try to get the data in the new controller, the dialog still does not reflect the data. What should I use to make sure the dialog reflects the data that I am getting from the server

<div class="container-fluid" ng-controller="EditUserController">

    <div class="text-center container-fluid">
        <label class="sub-header">Edit User: {{userEmail}}</label>
    </div>

    <form action="editUser" method="post" name="editForm">
        <div>
            <div class="pull-right">
                <label>Delete User</label><br> <a href="#"
                    class="btn btn-block btn-sm btn-danger" ng-click="deleteUser(userEmail)">{{userEmail}}</a>
            </div>
            <div>
                <label>Change Role</label>
            </div>
            <div>
                <label>
                <input type="checkbox" ng-model="superVisor" name="superVisorFlag" 
                ng-true-value="1" ng-false-value="0" value="${existingUser.superVisorFlag}">
                Make a Supervisor</label>
            </div>
            <div>
                <input type="text" class="form-control" ng-model="email"
                    name="emailAddress" ng-disabled = "true"
                    ng-options="email for email in userEmail"
                    value="${existingUser.emailAddress}"
                    placeholder="Enter New User Email Address" bs-typeahead>
            </div>
            <div>
                <input type="text" class="form-control" ng-model="firstName"
                    name="firstName" value="${existingUser.firstName}"
                    placeholder="Enter First Name" bs-typeahead>
            </div>
            <div>
                <input type="text" class="form-control" ng-model="lastName"
                    name="lastName" value="${existingUser.lastName}"
                    placeholder="Enter Last Name" bs-typeahead>
            </div>


            <div>
                <a href="#" class="btn btn-sm btn-primary" ng-click="saveChanges()">Save Changes</a>
            </div>
        </div>
    </form>

</div>

<script type="text/javascript"
    src="<c:url value="/resources/scripts/admin.js"/>"></script>

The above is a jsp for the dialog. Below is my js file -

var app = angular.module('scc-admin', [ 'ngDialog', 'mgcrea.ngStrap' ]);
app.factory("UserList", function() {
    var UserList = {};
    UserList.data = [ {
        userId : 111,
        userFirstName : "xxx",
        userLastName : "yyy",
        userEmail : "[e-mail]",
        userRole : "Admin"
    }, {
        userId : 222,
        userFirstName : "second",
        userLastName : "last",
        userEmail : "[e-mail]",
        userRole : "Manager"
    }];
    return UserList;
});
app.controller('UserSettingsController', function($scope, ngDialog, UserList,$http) {
    // variable for the bashboard list
    $scope.userList = UserList;
    $scope.editUser = function(userEmail) {             
        $scope.userEmail = userEmail;       
        ngDialog.open({
            template : 'editUser' ,
            className : 'ngdialog-theme-default',
            controller : 'EditUserController',
            closeByEscape : true,
            scope : $scope
        });
    };

    $scope.addUser = function() {
        ngDialog.open({
            template : 'addUser',
            className : 'ngdialog-theme-default',
            controller : 'AddUserController',
            closeByEscape : true,
            scope : $scope
        });
    };

});

app.controller('EditUserController', function($scope, ngDialog, $http) {

    ngDialog.template = $scope.output;
    ngDialog.$modelValue = $scope.output;

    var responsePromise = $http.get("initUser?email=" + $scope.userEmail);
        responsePromise.success(function(data, status, headers, config) {
                $scope.output = data;
                console.log(data);                
        });
    console.log($scope);

    $scope.deleteUser = function(){

        $scope.cfdump = "";

        var str = {emailAddress : $scope.userForm.emailAddress.$modelValue};
        str = JSON.stringify(str);

        var request = $http({
            method: 'post',
            url: "deleteUser?formData=" + str,
            data: ({formData:str})
        });

        request.success(function(html){
            alert("success");
        });

        request.error(function(errmsg){
            alert("Unable to delete user");     
        });     

    }

});

I am opening a dialog in usersettings controller and trying to load it with default data. I tried setting the new dialog's template to the output of the AJAX call, it did not work. What am I missing here?

解决方案

After consulting the documentation, I learned following solution. It should work for you like it did for me.

To pass data (JSON Object) for ng-model inside the ngDialog, you can declare your ngDialog as following.

ngDialog.open({
    template: 'my-template.html',
    className: 'ngdialog-theme-plain',
    data: $scope.myJSONObject
});

Now, with the above part done, you need to bind the data in your popup ngDialog, so go and put ngDialogData.myJSONObjectFieldName in your ng-model.

Consider following example for further elaboration. We assume that we have myJSONObject as following.

myJSONObject={
   first_name: 'John',
   last_name: 'Doe'
};

To use first_name inside your ngDialog's ng-model, simply put ng-model="ngDialogData.first_name".

这篇关于如何在ngDialog中加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！