Angular JS:当视图外观相同时，使用ng-repeat重复处理来自每个视图的不同UI组件
很抱歉这个大标题，我想不出比这更好的东西了。让我解释一下我遇到的问题。
我必须渲染三个卡片，每个卡片都有相同的外观，这意味着每个卡片都有一个标题部分和一个主体部分。我使用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。例如，一张卡片的主体可能有一个使用高度表的图表，另一张卡片可能只想使用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"
}
]
}
]
在这方面寻求帮助。
谢谢。
回答 2
Stack Overflow用户
发布于 2013-04-05 21:43:16
我是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-graph=中用div switch“widget.data”实现了这一点，但实际上并没有提到指令部分，只提到了切换。如果每种类型都有很大的不同，那么这将使单独的指令更简单，因此可能是更好的整体方法。
下面这篇来自simpulton的帖子真的很好，涵盖了其中的指令部分。您甚至可以更进一步，使它更像是标签所在的小部件(他的“第五幕:小部件指令”)，然后传递类型和相应的数据。他正在写一个指令，在CSS中创建的一些圆圈上做动画，所以你没有理由不能使用它来应用一些highchart或jQuery UI代码。它写得非常好，并且包含了jsfiddle的代码，所以你也可以看到它是如何工作的。
http://onehungrymind.com/angularjs-directives-basics/
Stack Overflow用户
发布于 2013-04-05 19:33:16
您的问题的解决方案是将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>https://stackoverflow.com/questions/15829620
复制相似问题
腾讯云开发者
