Question

我是AngularJS的新手，我很难搞清楚如何解决这个问题。

我有标签（每个区域一个），每个资源内有一个表格。区域的代码如下所示：

app.controller("AreasController", function () {
    this.areas = [
        {
            name: "Area",
            value: 5,
            resources: [
                'type1',
                'type2'
            ]
        },
        {
            name: "Area 2",
            value: 10,
            resources: [
                'type1',
                'type3'
            ]
        },
    ];
});

HTML上有一个带ng-repeat="area in areas.area"的div。

我对如何做有点困惑的是资源，因为每个资源都有不同的表模板和数据（例如：type1有Name和Age，type2有Day，month和Year等）。

任何人都可以建议一种方法吗？

Answer 1

如果您的标签内容完全不同，那么您可能不会重复，而是手动“展开”标签。如果您在选项卡之间有一些类似的部分，您可以通过指令共享代码。如果您认为标签非常相似，以至于您仍然觉得它们应该在ng-repeat中，那么您可以使用ngSwitch或ngInclude来有条件地呈现不同类型。对于ngSwitch，您可以在模型中使用某种类型标识符，然后您可以打开该类型并为您的Person（名称和年龄）和日历（日/月/年）创建一个案例。 ngInclude绝对是两个选项的重量级，如果你有很多类型，或者你想在模型方面动态定义类型，那么交换机中有很多代码是有意义的。使用ngInclude，您将为要渲染的每种类型创建单独的部分视图（HTML模板）。在模型中，您将引用该模板名称。例如，您可能有ng-include="resource.templateName"，其中模板名称可能是/views/Person.html和/views/Calendar.html。

Answer 2

您可以将ng-if与ng-include

一起使用

<div ng-repeat="area in areas">
    <div ng-repeat="resource in area.resources">
        <div ng-if="resource == 'type1'">
            <div ng-include="'type1_temlate.html'"></div>
        </div>
        <div ng-if="resource == 'type2'">
            <div ng-include="'type2_temlate.html'"></div>
        </div>
    </div>
</div>

注意：您甚至可以使用ng-switch

Answer 3

另外，请查看“UI路由器”库。可能会使您的实施更容易;）

AngularJS - 基于类型的表模板

3 个答案: