0

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

如果我有一个数组：

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

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

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

4

2 回答 2

2

我建议制作一个directive将在转发器范围内通过的 a 并执行 anelement.replaceWith和 a$compile以获取 HTML。如果没有进一步的角度绑定，您可以只使用$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'])
于 2013-09-10T17:12:28.873 回答
1

我对数组中的元素使用 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>
于 2013-09-10T17:51:08.167 回答