2016-09-29 4 views
0

まず、私はionicとangularjsにはかなり新しいです。今ではアプリを開発しようとしていますが、今すぐデータを表示して検索するのに問題があります。Angularjs入れ子にされたjsonオブジェクトは、ng-repeatがイオンで働いていません

私は入れ子になったjsonオブジェクトを持っており、ng-repeatでそれを表示することはできません。

ここにjsonオブジェクトがあります。

$scope.nestedTestdata = [{ 
       "leadlist ": [{ 
        "submitted_date": "01-01-2160", 
        "submission_value": { 
         "full_name": "Full Name ", 
         "phone": "This is test data.", 
         "source": "I hate you" 
        } 
       }, 
        { 
         "submitted_date": "01-01-2015", 
         "submission_value": { 
          "full_name": "full name", 
          "phone": "phone.", 
          "source": "I really really hate you" 
         } 
        }, 
        { 
         "submitted_date": "01-01-2016", 
         "submission_value": { 
          "full_name": "I am awesome", 
          "phone": "HP phone.", 
          "source": "I hate you" 
         } 
        }] 
      }]; 

ここに表示方法を示します。

<div class="lead_row" ng-repeat="data in nestedTestdata.leadlist | filter: model.search" > 

      <div class="lead_col">{{data.submitted_date | date : 'dd-MMM-yyyy'}}</div> 
      <div class="lead_col">{{data.submission_value.source}}</div> 
      <div class="lead_col">{{data.submission_value.full_name}}</div> 
      <div class="lead_col">{{data.submission_value.phone}}</div>  
     </div> 

これを次のjsonオブジェクトに変更すると、表示機能と検索機能を同時に動作させることができます。

$scope.testdata = [{ 
       "submitted_date": "01-01-2160", 
       "submission_value": { 
        "full_name": "Search is working", 
        "phone": "This is fucking test data.", 
        "source": "I hate you" 
       } 
      }, 
       { 
        "submitted_date": "01-01-2015", 
        "submission_value": { 
         "full_name": "Fucking full name", 
         "phone": "Fucking phone.", 
         "source": "I really really hate you" 
        } 
       }, 
       { 
        "submitted_date": "01-01-2016", 
        "submission_value": { 
         "full_name": "I am awesome", 
         "phone": "Fucking HP phone.", 
         "source": "I hate you" 
        } 
       }]; 

だから私は問題を表示していないと思います。 どうすればこの仕事をすることができますか?

フルコードについては、次のリンクをご確認ください。 http://play.ionic.io/app/720567016712

ありがとうございます。

答えて

2

nestedTestDataには配列が含まれています。配列内にはオブジェクトがあります。

ng-repeat="data in nestedTestdata[0].leadlist | filter: model.search" 

次のようにSOコードは次のようになります。

<div class="lead_row" ng-repeat="data in nestedTestdata[0].leadlist | filter: model.search" > 
       <div class="lead_col">{{data.submitted_date | date : 'dd-MMM-yyyy'}}</div> 
       <div class="lead_col">{{data.submission_value.source}}</div> 
       <div class="lead_col">{{data.submission_value.full_name}}</div> 
       <div class="lead_col">{{data.submission_value.phone}}</div>  
      </div> 
+0

の後にスペースを削除してください。私はそれを完全に見落としています。ありがとうございました。できるだけ早く答えを受け入れます。 –

1

だから、あなたは、あなたが「leadlist」のキーを持つオブジェクトと別の配列を、配列を定義しているしています。上記の答えはあなたの問題を解決できるか、あなたは自分のキーの上のアレイを削除することができ、あなただけの通常のdata.nestedTestData以下

あなたはそれを書き換えることができる方法であるとして、それをアクセスすることができます。

`$scope.nestedTestdata = { 
    "leadlist" : [{ 
     "submitted_date": "01-01-2160", 
     "submission_value": { 
     "full_name": "Full Name ", 
     "phone": "This is test data.", 
      "source": "I hate you" 
    } 

}, 
{ 
    "submitted_date": "01-01-2015", 
    "submission_value": { 
     "full_name": "full name", 
     "phone": "phone.", 
     "source": "I really really hate you" 
    } 
}, 
{ 
    "submitted_date": "01-01-2016", 
    "submission_value": { 
     "full_name": "I am awesome", 
     "phone": "HP phone.", 
     "source": "I hate you" 
    } 
}] 

}; `

1

ネストしたng-repeatを使用できます。$scope.nestedTestdataに複数のオブジェクトがある場合にも機能します。 Here is working fiddle

<div ng-controller="MyCtrl"> 
    <div class="lead_row" ng-repeat="data in nestedTestdata"> 
     <div ng-repeat="list in data.leadlist"> 
      <div class="lead_col">{{list.submitted_date | date : 'dd-MMM-yyyy'}}</div> 
      <div class="lead_col">{{list.submission_value.source}}</div> 
      <div class="lead_col">{{list.submission_value.full_name}}</div> 
      <div class="lead_col">{{list.submission_value.phone}}</div> 
     </div> 
    </div> 
</div> 

あなたはちょうど私の一日保存"leadlist "

関連する問題