0

为大标题道歉，我想不出更好的东西。让我解释一下我遇到的问题。

我必须渲染三张卡片，每张卡片都有相同的外观，这意味着它们每个都有一个标题部分和一个正文部分。我正在使用 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。例如，一张卡片的 body 可能有一个使用 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"
    }
   ]
   }
]

三卡申请

在这方面寻求帮助。

谢谢你。

4

2 回答 2

3

您的问题的解决方案是将 ng-switch 和 ng-repeat 结合起来以实现您试图获得的效果。基本上你会重复这些项目并在其类型之间切换。Angular 只包含与 switch 匹配的 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 下面的这篇文章很好地涵盖了它的指令部分。你甚至可以让它更进一步，让它更像一个小部件，标签可以是（他的“第五幕：小部件指令”），然后传递类型和数据。他正在编写一个指令来对一些用 CSS 创建的圆圈进行动画处理，所以你没有理由不能使用它来应用一些 highchart 或 jQuery UI 代码。它写得非常好，并且在 jsfiddle 中包含代码，因此您可以看到它也可以正常工作。

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

于 2013-04-05T13:43:16.177 回答