AngularJS動的テンプレートを作成

Question

私は現在、2つの別々のサービスからデータとメタ情報をフェッチする、ある種の動的テンプレートを作成しようとしています。最終的な結果は、正しいラベルのデータを示す表でなければなりません。私の計画は、3,4または5列のテーブルのような異なる基本デザインのHTMLテンプレートを作成することでした。その後、一致するコントローラは、属性のidとそのテーブルに表示されるnameの配列を返すサービスからメタデータをフェッチする必要があります。これまでのところは良いが、今トリッキーな部分が来る：あなたがそれらを正しく一致させることができるように
第2のサービスは、テンプレートとメタデータのidと実際のデータの一致のidのためのマッチングデータを取得します。ここで

コードありplunkrである：Link

主な問題は、次のコードです：<td>間で

<tr ng-repeat="person in persons"> 
    <td>{{person.name}}</td> 
    <td>{{person.age}}</td> 
    <td>{{person.postal}}</td> 
</tr> 

は、データをdoesn'tダイナミックフェッチが、静的取得 - タグ。私は明示的に私の属性が呼び出される方法を言うが、私の属性がどのように呼び出されるかを知るためにメタサービスからフェッチされたデータを使用する必要はありません。 最後に、テンプレートは属性の名前と一致するデータを取得する必要があります。あなたは私のためにこれを解決するための良いアイデアを持っていますか？物事はもう少し明確にする

EDIT
：
現時点ではそこに立って{{person.name}}用語は、ハードコーディングされているため<td>タグ間のデータがフェッチされた静的です。データ構造の構造がpostalの代わりにcountry属性であると仮定しましょう。同じままのテンプレートは、person.countryからではなく、person.postalからデータを取得しようとします。だからundefinedか、エラーでさえも結果になります。
これを防ぐには、属性の名前をメタサービスから取得し、HTMLページでビルドする必要があります。

ワークフローは次のように何とかなります。

1. は、メタデータをフェッチ - >属性の名前正しい属性
を呼び出すために「HTML」内の属性の名前を設定し
2. を取得します
3. は、テーブルを作成します
4. 前に定義された属性を持つ実際のデータをフェッチ

Answer 1

http://jsfiddle.net/Lt024p9h/1/

<div ng-controller="MyCtrl"> 
    <table border="1"> 
    <tr ng-repeat="person in persons"> 
     <td ng-repeat="attr in query.attribs"> 
     {{person[attr.id]}} 
     </td> 
    </tr> 
    </table> 
</div> 

ここでは何が起こっているのですか？

あなたはassociative arrayとしてオブジェクトを使用して、次に表示したい属性を取得する場合だから我々は何をすべきか、あなたのフィドルで行きます。

これはattr.idとプロパティが一致している必要はありません。