具有不同元素类型的 ng-repeat答案

【问题标题】：ng-repeat with different element types具有不同元素类型的 ng-repeat
【发布时间】：2013-09-14 12:30:11
【问题描述】：

是否可以在ng-repeat 中添加不同的 HTML 元素类型？

如果我有一个数组：

['line', 'arc', 'rectangle', 'line', 'polygon', ... ]

这些元素会有不同的 SVG 标签和不同的数据来定义它们。

是否可以让AngularJS根据值插入正确的标签？

【问题讨论】：

标签： html angularjs svg

【解决方案1】：

我建议创建一个directive，它会在转发器的范围内通过，然后使用element.replaceWith 和$compile 来获取HTML。如果没有进一步的 Angular 绑定，您可以使用 $sce 输出受信任的 HTML。概率取决于站点所需的安全类型，我会亲自使用该指令。 ** 我没有在下面测试过，我对 canvas/svg 的东西一无所知 :-)

页面上的html

    <svg-object varObject="o" data-ng-repeat="o in varObjects"></svg-object>

控制器上的json模型

$scope.varObjects = [{ "shape": "circle", "id": "cir123", "cx": "50", "cy": "50", "r": "50", "fill": "red" }, { "shape": "rect", "id": "rec23", "width": "50", "height": "50", "fill": "green" }]

声明你的模块，命名它并将命名的模块包含在你的应用程序中

var module = angular.module('myApp.directives', [])
module.directive('svgObject', function ($compile) {
return {
    scope:{ varObject:'@'
    },
    restrict: 'E',
    link: function (scope, elem, attrs, ctrl) {

        var rsltHtml = '<' + scope.varObject.shape
        for (var property in scope.varObject) {
            switch (property) { //properties to ignore
                case "shape":
                case "alsoignore":
                    continue;
            }
            if (scope.varObject.hasOwnProperty(property)) {
                rsltHtml += ' '+ property + '="' + scope.varObject[property]+ '" ';
            }
        }
        rsltHtml += "/>";
        elem.replaceWith($compile(rsltHtml)(scope));
    }
};

});

向主应用添加指令

var myApp = angular.module('myApp', ['myApp.directives', 'ngSanitize'])

【讨论】：

酷，这就是我不知道的事情。我会看书，任何关于我如何做这些事情的详细说明将不胜感激。

【解决方案2】：

我对数组中的元素使用 ng-repeat 执行此操作，然后对值执行 ng-switch。

<li ng-repeat="q in context.array">
    <div ng-switch on="q.type">
       <div ng-switch-when="line">I AM A LINE</div>
       <div ng-switch-when="arc">I AM AN ARC</div>
       <div ng-switch-when="rectangle">I AM A RECTANGLE</div>
       <div ng-switch-when="polygon">I AM A POLYGON</div>
    </div>
</li>

【讨论】：

我不完全确定这对运行时的影响，但使用 ng-switch 只是显示/隐藏 DOM 元素，而不是实际动态获取部件，对吗？到目前为止，我自己坚持使用指令方法并切换模板（如果可能，从缓存中加载它，否则根据需要获取它）。虽然我确实喜欢这种方法的简单性，但我想知道我对性能的偏执是否有道理，这在移动设备上的复杂应用中是否有效？
我没有在手机上使用这个，所以我不能说那个。我相信您可以提出其他解决方案。这是我使用的，没有发现任何问题，但是我的重复限制在 ~ 2 - 20 个元素。
我要试一试，但我认为<div /> 将是一个问题，即使 show\hide 不是。我会报告发生的情况。
看起来可行，请参阅JS Fiddle。 Angular 实际上会删除未使用的元素，这会在编译文件中产生很多字母，但不会产生大量 DOM！