angularjs - 角度 js 向 ngDialog 显示获取的数据
问题描述
我想从服务器获取数据并将其显示到 ngDialog 对话框
我正在尝试以下代码
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 包含一个页面
<div ng-repeat="i in plist">
{{i.fname}} {{i.lname}}
</div>
在这里,我调用“show-like-details”来获取返回用户的 id、fname、lname 的 json 数据。我想在打开的 ngdialog 上的 ngDoalog 框中显示此数据,它正在显示文本 like-user-page
我想在 plist insode 'like-user-page'(这是代表服务器中页面的 url)数据中进行迭代,并将其显示给 ngdialog。以及如何在 ngDialog 中调用 url
解决方案
您应该在 $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");
});
};
});
推荐阅读
- random - 获得相同的随机数,可能错误使用 srand() 或编码错误?
- r - 有没有办法创建一个包含研究日期(每个参与者不同)作为附加分组变量的多面 ggplot?
- authentication - 护照未在 API Next JS 中进行身份验证
- logstash - 将输入标识符添加到 docker 中的 logstash 日志记录
- python - python 3.8中多边形的比例着色
- java - SimpleDateFormat 可以打印时区吗?
- c++ - 是否需要锁定阅读对象?
- react-native - 8:尝试获取用户当前位置时出现位置不可用错误
- java-ee-6 - 如何将 UserOptions 保存在 Web 应用程序中
- python - Tensorflow 概率 - MCMC 样本链 - TypeError: Tensor is unhashable - Mac M1