2016-04-18 18 views
-1

自分自身を円で走っていると、私はここで何をする必要があるのか​​分かりません。最初の角度指示:静的テーブル

私は、次の構文を使用してディレクティブを書きたい:

<my-table data="(some json)"> 
    <my-column binding="json.property" header="Name" /> 
</mytable> 

何も空想(まだ、私は最初にこのこぶの上に取得する必要があります)。 JSON文字列を受け取り、子ディレクティブに基づいてテーブルを作成します。誰かが一緒に私を走らせるためにベアボーンの例を投げることができますか?

ありがとうございます!

+0

なぜディレクティブを使用するのですか? JSON文字列を受け取ってから、HTMLテーブルを構築できる「テーブル形式の」データを返すサービスを作成することができます。 –

+0

また、「子ディレクティブに基づいてテーブルを作成する」とはどういう意味ですか?それはもっと説明が必要です。 –

+0

実際にはこのためのディレクティブは問題ありません。特に、データが重複している場合。 – Rob

答えて

0

あなたが単純なテーブルを構築したい場合は、このようなものは、あなたが始めるのに十分であるべきである:

https://jsfiddle.net/edbrepzu/

角度:

// controller 
function Controller($location) { 
    var vm = this; 
    vm.data = [ 
    {band: 'Led Zeppelin',id: 1}, 
    {band: 'The Pixies',id: 2}, 
    {band: 'Beck',id: 3} 
    ]; 
} 

// directive 
function myTable() { 
    var directive = { 
     restrict: 'E', 
     template: '<table><tr ng-repeat="d in data"><td>{{d.band}}</td><td>{{d.id}}</td></tr></table>', 
     scope: { 
     data: '=' 
     } 
    }; 

    return directive; 
} 

はHTML:

<my-table data="ctrl.data"></my-table> 

個人的には、私はdiのテンプレートではなく、templateUrlのファンですHTMLコードが重くなったときにテンプレートURLが少しきれいになるので、直感的です。

+0

ありがとうRob。私はtemplateUrlの使い方に同意します。私はテーブルヘッダーも定義したいと思っています。私の例では "my-column"要素が理想的です。そこにはどんな指導? – zakster82

+0

使用するヘッダーの名前を知っていますか、それとも動的なのでしょうか。 – Rob

+0

これらはHTMLにコード化され、実行時には生成されません。しかし、インスタンスごとに異なることになります。 – zakster82

関連する問題