0

大きなタイトルで申し訳ありません。これ以上のものは思いつきませんでした。私が抱えている問題を説明しましょう。

それぞれが同じルック フィールを共有する 3 つのカードをレンダリングする必要があります。つまり、それぞれにヘッダー セクションとボディ セクションがあります。モデルからデータを取得し、これらのカードをレンダリングするために ng-repeat を使用しています。

コード：

<div class="card">
   <a href="#/cards/{{card.id}}"><h1>{{card.title}}</h1></a>
   <div ng-repeat="widget in card.widgets" class="widget">
     <h2>{{widget.title}}</h2>
         {{widget.type}}
   </div>
</div>

これで、これらのカードの各ボディに異なる UI が含まれているはずです。たとえば、あるカードの本体には Hight Charts を使用したチャートが含まれている場合があり、別のカードの本体には jQuery UI ライブラリの UI を使用したいだけの場合などがあります。

ng-repeat を使用してループしているときに、どうすればそれを達成できますか? 私の開始方向が正しいかどうか教えてください。

モデル データは次のようになります。

[
 {
  "id": "c001",
  "title": "CARD 1",
  "widgets": [
    {
      "title": "title 1.1",
      "type": "line-graph"
    },
    {
      "title": "title 1.2",
      "type": "bar-chart"
    }
   ]
 },
 {
  "id": "c002",
  "title": "CARD 2",
  "widgets": [
    {
     "title": "title 2.1",
     "type": "graph"
    },
    {
     "title": "title 2.2",
     "type": "bar-chart"
    }
   ]
  },
  {
   "id": "c003",
   "title": "CARD 3",
   "widgets": [
    {
      "title": "title 3.1",
      "type": "line-graph"
    },
    {
      "title": "title 3.1",
      "type": "bar-chart"
    }
   ]
   }
]

カード3枚のお申し込み

これに関するヘルプを探しています。

ありがとうございました。

4

2 に答える 2

3

問題の解決策は、ng-switch と ng-repeat の両方を組み合わせて、取得しようとしている効果を達成することです。基本的に、アイテムを繰り返し、そのタイプを切り替えます。Angular には、スイッチに一致する DOM の部分のみが含まれます。

これは、何をすべきかの大まかなアイデア/ htmlです。

<div class="card">
   <a href="#/cards/{{card.id}}"><h1>{{card.title}}</h1></a>
   <div ng-repeat="widget in card.widgets" class="widget">
     <h2>{{widget.title}}</h2>
         <div ng-switch on="widget.type">
            <div ng-switch-when="line-graph">
               <!--do something here relevant to line graph-->
               <div line-graph="widget.data"></div>
            </div>
            <div ng-switch-when="graph">
               <!--do something here relevant to graph-->
               <div graph="widget.data"></div> 
            </div>
            <!-- and so on... add more if you need-->
         </div>
   </div>
</div>
于 2013-04-05T11:33:15.993 に答える
1

私は Angular の初心者ですが、ディレクティブを使用してすべてをカプセル化できると思います。アイデアは、divに追加してタイプを渡す独自のディレクティブを持ち、そこからディレクティブがロジックを処理し、適切なチャート/要素/その他を作成し、javascriptファイルですべての作成を行うことです。ディレクティブ。

<div chart="line-graph"></div>
<div chart="bar-chart"></div>

module.directive('chart', function(){
  return{
    //logic to build various charts with different libraries here
  }
});

書くのはかなり複雑なディレクティブかもしれませんが、エレガントな書き方になるでしょう。@ganaraj は、ng-switch 内に div graph="widget.data" を使用して上記のことを行いましたが、ディレクティブ部分については実際には言及しておらず、切り替えだけです。これにより、個々のディレクティブがよりシンプルになるため、各タイプが大幅に異なる場合は、全体的なアプローチとして優れている可能性があります。

以下の simpulton からの投稿は、そのディレクティブ部分をカバーするのに非常に適しています。さらに一歩進んで、タグを配置できるウィジェットのようにすることもできます (彼の「行為 5: ウィジェット ディレクティブ」)。次に、その型とそれに付随するデータを渡します。彼は、CSS で作成されたいくつかの円でアニメーションを実行するディレクティブを作成しているため、それを使用してハイチャートまたは jQuery UI コードを適用できない理由はありません。非常によく書かれており、jsfiddle にコードが含まれているため、同様に機能することがわかります。

http://onehungrymind.com/angularjs-directives-basics/

于 2013-04-05T13:43:16.177 に答える