angularjs – ng-repeat在通过工厂服务获取时不显示数据
需要帮助来理解我的错误/在页面上显示数据.
我在论坛上几乎每个问题都说“ng-repeat not working”.但仍然无法找到答案. (请注意:我第一次尝试通过$http创建工厂服务来获取数据) 请查看我的以下JavaScript代码(模块,控制器和工厂在一个地方定义) //App declaration var myApp = angular.module("appLeadsLogRpt",[]); //Controller declaration myApp.controller('controllerLeadsLogRpt',['dataService',fncontrollerLeadsLogRpt]); function fncontrollerLeadsLogRpt(dataService) { var vm = this; //Table headers vm.TableHeaders = ["Lead Id","Source","Create Date","Status","Contact Id","Customer Name","AssignedTo","Mail Content","Closed Reason","Last Lead Note"]; dataService.getAllData() .then(getData,null) .catch(showError); function getData(data) { vm.LeadsLogRptData = JSON.parse(data); //console.log(JSON.parse(data)); } function showError(errMsg) { console.log(errMsg); } } //Factory Service to fetch data myApp.factory('dataService',['$http',DataService]); function DataService($http) { return { getAllData: GetAllData }; function GetAllData() { return $http({ method: 'get',url: 'DataHandler.ashx?method=leadsReport&listId=504473' }) .then(sendResponseData) .catch(sendError) } function sendResponseData(response) { return response.data; } function sendError(response) { return response.status; } } </script> 我的Html如下: <div id="DvContent" style="width:100%" data-ng-app="appLeadsLogRpt"> <div style="width:100%;" data-ng-controller="controllerLeadsLogRpt as vm1"> <input type="text" id="txtJsonData" value='<%=jsonLeadsLogRpt %>' style="display:none" /> <div><h3>Leads Log Report</h3></div> <div style="text-align:right;margin-bottom:2px;padding-right:2px;"> <a href="javascript:void(0);" data-ng-click="ExportToExcel();"><img src="/mp_images/excelicon.gif" border=0 width=22 height=22 alt="Open in Excel"></a> </div> <div id="divExportToExcel"> <table style="width:100%" id="tblLeadLogRpt" class="table table-bordered"> <thead> <tr style="background-color:#CCCCCC"> <th data-ng-repeat="item in vm1.TableHeaders" class="ng-cloack">{{item}}</th> </tr> </thead> <tbody> <tr data-ng-repeat="item1 in vm1.LeadsLogRptData"> <td class="ng-cloack">{{item1.A_LeadId}}</td> <td class="ng-cloack">{{item1.B_Source}}</td> <td colspan="8"></td> </tr> <tr data-ng-if="LeadsLogRptData.length==0"><td colspan="10">Data Not Found</td></tr> </tbody> </table> </div> </div> </div> 如果我将服务器返回的硬编码数据分配给ng-repeat,它可以正常工作 请让我知道我做错了什么. 还有一个问题. 在工厂我通过调用$http的get方法获取数据 如果我想通过Post方法调用它,我该如何传递params? 在Jquery中,我按照以下方式进行操作. $.ajax({ url: 'AbcdHandler.ashx',type: 'POST',data: { 'method': 'ABCData','StartDate': startDate,'EndDate': endDate },success: function (result) { return JSON.parse(result); },error: OnError }); 提前感谢阅读和帮助. 我的最新观察: 当我在控制台上写数据时,得到了这个. (看一下函数getData(data)) [{ “A_LeadId”: “426429”,“B_Source”: “的LabX”},{ “A_LeadId”: “429369”,{ “A_LeadId”: “430586”,“B_Source”: “信息”},{ “A_LeadId”: “430589”,{ “A_LeadId”: “433848”,“B_Source”: “LabX软件”},{ “A_LeadId”: “448592”,“B_Source”:“Info”},{“A_LeadId”:“451795”,“B_Source”:“出价”},{“A_LeadId”:“453008”,“B_Source”:“低出价”},{“A_LeadId” :“453009”,{“A_LeadId”:“453010”,{“A_LeadId”:“455736”,“B_Source”:“信息” },{ “A_LeadId”: “455743”,{ “A_LeadId”: “457030”,{ “A_LeadId”: “457052”,“B_Source” :“LabX”},{“A_LeadId”:“461503”,“B_Source”:“手动输入”}] 如果我复制它并直接分配给vm.LeadsLogRptData,系统会在屏幕上正确显示输出. 还有一件事.当我检查数据长度时,它显示我621.({{vm.LeadsLogRptData.length}}) 实际上只有15个大括号对({}),系统应该显示我的长度为15 希望我能正确解释/描述我的问题. (需要以Json格式正确转换我的数据的东西) 谢谢, 我得到了答案 只需使用eval和Json.parse,系统就可以正常显示数据 有人请解释一下这背后的逻辑吗? 感谢所有阅读和回复的人. 解决方法
也许你应该使用$http对象的params属性,如:
function GetAllData() { return $http({ method: 'GET',url: 'http://localhost:12345/DataHandler.ashx',params: {method: "leadsReport",listId: 504473} }) .then(sendResponseData) .catch(sendError) } 如果要执行POST请求,您应该像这样使用它: function PostData() { return $http({ method: 'POST',data: {exampleData: exampleData} }) .then(sendResponseData) .catch(sendError) } 请记住为您的服务器URL更改http://localhost:12345/. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |