角度js显示提取到ngDialog的数据
[英]angular js showing fetched data to ngDialog
问题描述
I want to fetch data from server and show it to ngDialog dialog box 
我想从服务器获取数据并将其显示给ngDialog对话框
I an trying following code 我尝试下面的代码
var myApp = angular.module('myApp', ['ui.router', 'ngDialog']); myApp.controller('test', function($scope, $http, ngDialog) { $scope.plist = []; $scope.pno = 1; $scope.likeDetails = function(item) { var data = 'id=' + item.id + "&userid=" + $scope.userid + "&pno=" + $scope.ppno; $http({ method: 'POST', url: "show-liked-users", data: data, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(function successCallback(rs, status, headers, config) { console.log(rs); for (var i = 0; i < rs.data.plist.length; i++) { $scope.plist.push(rs.data.plist[i]); } }, function errorCallback(data, status, header, config) { alert("Opps unable to connect to server"); }); ngDialog.open({ template: 'liked-user-page', className: 'ngdialog-theme-plain', scope: $scope, data: $scope.plist }); }; });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.18/ui-router-angularjs.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/js/ngDialog.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/css/ngDialog.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/css/ngDialog-theme-default.css" /> <html> <body ng-app="myApp"> <div ng-controller="test"> <div class="like-count" ng-click="likeDetails(s)"> 5 </div> </div> </body> </html>
like-user-page url contains a page 赞用户页面网址包含一个页面
<div ng-repeat="i in plist">
{{i.fname}} {{i.lname}}
</div>
here i calling `show-like-details' to get json data that is returning id,fname,lname of users. 在这里，我调用show-like-details来获取返回用户ID，fname，lname的json数据。 I want to show this data on ngDoalog box on open ngdialog it is shoing text liked-user-page 我想在打开的ngdialog上的ngDoalog框上显示此数据，它正在推文本liked-user-page
I want to iterare in plist insode 'like-user-page'(this is url representing page in server) data in and show it to ngdialog. 我想在plist insode'like-user-page'（这是表示服务器中页面的url）数据中进行迭代，并将其显示给ngdialog。 and how to call url in ngDialog 以及如何在ngDialog中调用url
1 个解决方案
解决方案1
0 2018-06-13 13:37:42
You should open your dialogue inside the success callback of the $http call. 您应该在$ http调用的成功回调中打开对话框。
var myApp = angular.module('myApp', ['ui.router', 'ngDialog']);
myApp.controller('test', function($scope, $http, ngDialog) {
$scope.plist = [];
$scope.pno = 1;
$scope.likeDetails = function(item) {
var data = 'id=' + item.id + "&userid=" + $scope.userid +
"&pno=" + $scope.ppno;
$http({
method: 'POST',
url: "show-liked-users",
data: data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function successCallback(rs, status, headers, config) {
console.log(rs);
for (var i = 0; i < rs.data.plist.length; i++) {
$scope.plist.push(rs.data.plist[i]);
}
ngDialog.open({
template: 'liked-user-page',
className: 'ngdialog-theme-plain',
scope: $scope,
data: $scope.plist
});
}, function errorCallback(data, status, header, config) {
alert("Opps unable to connect to server");
});
};
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.