2016-10-20 5 views
5

私の間違いを理解して/ページにデータを表示するのに役立つ必要があります。工場出荷時のフェッチ時にng-repeatがデータを表示しない

「ng-repeat not working」というフォーラムのほぼすべての質問を終えました。しかし、まだ答えを見つけることができません。

(ご注意:私は$ HTTPで工場出荷時のサービスを作成することによって、データをフェッチしようとした1回目)

私のJavaScriptコード以下の(1箇所で定義されたモジュール、コントローラおよび工場)をご覧ください

//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に返された場合、正常に動作します。

私が間違っていることを教えてください。

もう1つ質問があります。工場で

私はPostメソッドでそれを呼び出すようにしたい場合は、どのように私はのparamsを渡すん$ HTTP

のgetメソッドを呼び出すことにより、データをフェッチ?

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"、 "B_Source": "LabX" 「A_LeadId」:「B_Source」:「B_Source」:「B_Source」:「B_Source」:「Info」)、「A_LeadId」:「4303586」、 : "LabX"}、{"A_LeadId": "448592"、 "B_Source": "Info"}、{"A_LeadId": "451795"、 "B_Source": "Bid"}、{"A_LeadId": "453008" 「B_LoadId」:「453009」、「B_Source」:「Low Bid」、「A_LeadId」:「453010」、「B_Source」:「Low Bid」)、「B_Source」:「Low Bid」、 "A_LeadId": "455736"、 "B_Source": "Info"}、{"A_LeadId": "455743"、 "B_Source": "Info"}、{"A_LeadId": "457030"、 "B_Source": "Info "}"、{"A_LeadId": "457052"、 "B_Source": "LabX"}、{"A_LeadId": "461503"、 "B_Source": "Manually Entered"}]

これを直接コピーするとvm.LeadsLogRptDataに割り当てると、システムは画面プロに出力を表示しますペリー。例: vm.LeadsLogRptData = [{"A_LeadId": "426429"、 "B_Source": "LabX"}、......];

もう1つ。私はデータの長さをチェックすると、それは示してくれ621({{vm.LeadsLogRptData.length}})

実際ありのみ15中括弧の対({})とシステムは私15

として長さを示すべき

私は自分の問題を正しく説明/説明したいと考えています。

(JSON形式で適切に私のデータを変換し、何かが必要)

おかげで、

私は

ちょうどJson.parseではevalを使用してシステムデータを適切に表示を開始答えてしまいました vm.LeadsLogRptData = eval(JSON.parse(data));

誰でもこの背後にある論理を教えてください。

これまで読んでお返事いただいた皆様に感謝します。

+0

"サーバーでハードコードされたデータを返却する場合はどうすればいいですか"という言葉の意味はあまり明確ではありません。そして、あなたはそのコンソールステートメント 'console.log(JSON.parse(data));'? – Sajan

+0

サジャン、「最新の観測」のセクションをご覧ください。希望は私の問題を理解するのに役立ちます。ありがとう – user3172224

答えて

0

たぶん、あなたは次のように、$ HTTPオブジェクトのプロパティのparams使用する必要があります:あなたはPOSTリクエストを実行する場合

function GetAllData() {     
      return $http({ 
       method: 'GET', 
       url: 'http://localhost:12345/DataHandler.ashx', 
       params: {method: "leadsReport", listId: 504473} 
      }) 
      .then(sendResponseData) 
      .catch(sendError) 
     } 

、あなたはこのようにそれを使用する必要があります。

function PostData() {     
      return $http({ 
       method: 'POST', 
       url: 'http://localhost:12345/DataHandler.ashx', 
       data: {exampleData: exampleData} 
      }) 
      .then(sendResponseData) 
      .catch(sendError) 
     } 

http://localhost:12345/を変更することを忘れないでくださいあなたのサーバーURLのために。

+0

Kacper、助けてくれてありがとう。しかし、フォームフィールドを投稿したいのであれば、どうやってそれらを渡すのですか? 2つの入力フィールドと1つのラジオボタンの値を渡したい場合、どのようにそれらを "exampleData"で圧縮しますか?また、Requestオブジェクトを使用して、ハンドラページでそれらを取得する必要があります。親切にガイドします。 – user3172224

+0

たとえば、 '$ scope.user.name'、' $ scope.user.surname'のようなフィールドを持つ '$ scope.user'のようなビューモデルオブジェクトがあり、それを** $ http **に渡したい場合data:{exampleData:$ scope.user} '、または' data:{exampleData1:$ scope.user.name、exampleData2:$ scope.user.surname} ' –

+0

あなたは説明することに感謝します。コードは、JQueryで現在使用されているのと同じように見えますが、param nameは一重引用符( ')を必要としません。これを試してみましょう、そして何か問題に直面したら、あなたの助けをもう一度お願いしますありがとう – user3172224

関連する問題