为什么数据不能't显示在查看页中
why does the data couldn't show in the viewpage?
这是html代码：
<li ng-repeat="data in spreadGroupData" ng-click="channelList(data.campaigns,data.name)"><a href="javascript:void(0)">{{data.name}}</a></li>`
这是我在services.js:中写的代码
services.getChannelName = function($scope,channelidList){
httpurl = "api/account/"+nowuID+"/channel/channellist?id=" + channelidList;
$http.get(httpurl).success(function(data){
if(data.length>0){
$scope.spreadGroupData = [];
for(var i in data){
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
});
};
$scope.spreadGroupData中有数据，为什么不能在视图页面中显示？
现在我知道我不应该在服务中使用$scope，但参数"channelidList"是我从另一个服务方法获得的。如何重写这一切？
services.getListData = function(scope,flag){
var reportList = "quality_report",merger = true;
if(typeof flag!='undefined' && flag == 1){
reportList = "fakequality_report";
merger = false;
}
var cids = scope.spreadUrls,dateArr=scope.date.split(" - "),startDate = "",endDate = "",channelids = "";
if(dateArr.length==1){
startDate = endDate = dateArr[0];
}else{
startDate = dateArr[0];
endDate = dateArr[1];
}
if(cids!=null){
if(cids!='All'){
channelids = "&channelid="+cids.join(",");
}
if(scope.selecteds != -1 && typeof(scope.selecteds) != "undefined"){
httpurl = "api/app/"+scope.selecteds+"/report/"+reportList+"?startdate="+startDate+"&enddate="+endDate+channelids;
$http.get(httpurl).success(function(data,status){
scope.tabTitle = data.name;
var tableList = services.colToRow(data.val),cidlen = cids.length;
scope.tabTotal = services.dataToTotal(data.val,cidlen);
var key = data.key,tabname = [],zero = [],tabListInfo = [],allnames = scope.spreadNames;
for(var i=0;i<scope.tabTotal.length;i++){
zero[i] = 0;
}
for(i=0;i<cidlen;i++){
var idx = $.inArray(allnames[i],key);
tabListInfo[i] = new Array();
if(idx>-1){
tabListInfo[i] = tableList[idx];
}else{
tabListInfo[i] = zero;
}
if(merger){
var temp = [];
for(var j=0;j<tabListInfo[i].length;j++){
temp[j] = tabListInfo[i][j];
}
temp.unshift(scope.spreadNames[i]);
tabListInfo[i] = temp;
}
}
var channelIdList = [];
if(key.length>0){
var n = 0;
for(var i in scope.spreadData){
for(var j in key){
if(key[j] == scope.spreadData[i].name){
n++;
channelIdList.push(scope.spreadData[i].channel);
if(n>20) break;
}
}
}
}
services.getChannelName(scope,channelIdList.join(","));
scope.tabname = scope.spreadNames;
if(merger){
var tabListObj = [];
if(reportList == "quality_report"){
for(var i = 0; i <tabListInfo.length; i++){
tabListObj.push({
"name" : tabListInfo[i][0],
"hitNum" : tabListInfo[i][1],
"reSchedulNum" : tabListInfo[i][2],
"activeDevice" : tabListInfo[i][3],
"activeRate" : tabListInfo[i][4],
"payment" : tabListInfo[i][5],
"spdID" : cids[i]
});
}
}
scope.tabListInfo = tabListObj;
}else{
if(reportList == "fakequality_report"){
var tabListObj = [];
for(var i = 0; i <tabListInfo.length; i++){
tabListObj.push({
"name" : scope.tabname[i],
"reSchedulNum" : tabListInfo[i][0],
"hitNum" : tabListInfo[i][1],
"errHitNum" : tabListInfo[i][2],
"errHitRate" : tabListInfo[i][3],
"activeDevice" : tabListInfo[i][4],
"errActDevice" : tabListInfo[i][5],
"errActRate" : tabListInfo[i][6],
"spdID" : cids[i]
});
}
scope.tabListInfo = tabListObj;
}else{
scope.tabListInfo = tabListInfo;
}
}
scope.spreadIDs = cids;
}).error(function(data){
services.loginTimeout(data);
});
}
}
};
您永远不应该将$scope对象传递给服务，服务应该始终有一个可重用的方法，该方法将被公开。我建议您的服务方法应该向控制器调用方方法返回promise，调用方方法将在控制器promise成功方法中实现绑定逻辑。
服务方法
services.getChannelName = function(channelidList) {
httpurl = "api/account/" + nowuID + "/channel/channellist?id=" + channelidList;
return $http.get(httpurl).success(function(data) {
return data;
}).error(function(err) {
return err;
});
};
控制器方法
$scope.getChannelName = function() {
$scope.spreadGroupData = [];
service.getChannelName(channelidList).then(function(data) {
if (data.length > 0) {
for (var i in data) {
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
}, function(err) {
console.log("Error" + err);
})
}
更新
关于代码的全部想法如下。需要维护正确的代码堆栈解析。第一个服务方法将返回promise，解析后您需要更改一些范围变量，然后您将调用具有promise的第二个服务方法，解析后需要更新范围。
代码
services.getListData(flag).then(function(data) { //you may need to pass multiple parameter to this
//then do scope operation
service.getChannelName(channelidList).then(function(res) {
if (res.length > 0) {
for (var i in data) {
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
}, function(err) {
console.log("Error" + err);
});
})
我只看到一件可能导致问题的小事，在httpurl变量前面缺少var关键字，我只将其添加到下面的演示中。
显示数据所需的视图：
<body ng-controller="myController">
Spread Group Data
<br />
------------------------------------------------------------
<li ng-repeat="data in spreadGroupData"
ng-click="channelList(data.campaigns,data.name)">
<a href="javascript:void(0)">{{data.name}}</a>
</li>
</body>
我使用了一个mock json来模拟您的服务，并直接在控制器中调用它：
// Prepared a mock json array on the http://beta.json-generator.com and below url returns:
// [{"name":"Item 1","id":1},{"name":"Item 2","id":2},{"name":"Item 3","id":3},{"name":"Item 4","id":4}]
var httpurl = "http://beta.json-generator.com/api/json/get/LoUmNC4";
$http.get(httpurl).success(function(data) {
if (data.length > 0) {
$scope.spreadGroupData = [];
for (var i in data) {
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
});
如果您的服务独立于控制器，那么您可以将$scope传递给您的服务方法。但在这个演示中，我直接在主控制器中实现了http调用块。除此之外，正如@pankajparkar所说，不要在工厂或与服务无关的服务中使用$scope，并从类似的服务中获取和使用响应数据。请检查promise和$q以处理异步调用。
这是一个工作演示：演示
Place$scope.spreadGroupData=[]；外部$http调用：-
services.getChannelName = function($scope,channelidList){
httpurl = "api/account/"+nowuID+"/channel/channellist?id=" + channelidList;
$scope.spreadGroupData = [];
$http.get(httpurl).success(function(data){
if(data.length>0){
for(var i in data){
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
});
};
相关文章：
- 为什么数据不能't显示在查看页中
- 为什么竞争不能在离子中显示(隐藏在标题下方）(离子竞争不能正常工作）
- 打字稿显示不能设置未定义的属性，如何解决
- 为什么WebBrowser控件在保存后不能正确显示HTML
- 我应该在Google Api javascript中进行什么更改，以便它只能显示印度城市，而不能落后于州和印度
- 日期不能显示在高图表上
- 不能在复选框旁边显示元素
- 只显示潜水时悬停按钮X时间-可以'我不能使它正常工作
- 为什么我的画布不能使用 Fabric.js 显示任何内容
- 谷歌图表和谷歌表格不能同时显示
- jQuery不能基于选择选项显示/隐藏元素
- Ajax 构建关系按钮有效，用于显示引导模式的第二个按钮有效，但两者不能协同工作
- angularjs:不能显示 JS 'typeof' 的返回值
- 为什么我不能点击我的函数来显示和隐藏
- Extjs 窗口在 IE 中不能很好地显示元素
- 为什么我'在关闭第一模态对话框之后，m不能显示第二模态对话框
- ng隐藏&ng显示不能仅在特定的AngularJS页面中工作
- JavaScript块显示不能与Firefox中的两个函数一起工作
- 鼠标悬停时，周突出显示不能正常工作
- 幻灯片显示不能正常工作
