javascript - 使用 Angular 和 ng-repeat 将属性添加到 HTML DIV

Question

我们正在使用 AngularJS，我们希望使用 ng-repeat 创建一系列 HTML DIV，每个 DIV 具有不同的 HTML 属性。

例如，我们有以下代表我们希望创建的 DIV 的列表

{"id":"year","class":"zone editable","contenteditable":"true","html":""},    
{"id":"analytics-image","class":"zone","html":""}    
{"id":"title","class":"zone","html":"Credit Assessment"},

并想创建以下 HTML

<div id="year" class="zone editable" contenteditable="true"></div>
<div id="analytics-image" class="zone"></div>
<div id="title" class="zone">Credit Assessment</div>

我有以下 Javascript

<div ng-repeat="item in items">{{item.html}} </div>

其中 items 是上述示例中的键值对。

非常感谢任何帮助

Answer 1

最灵活和干净的方法是创建非常简单的指令来创建必要的属性:

.directive('attrs', function() {
    return {
        link: function(scope, element, attrs) {
            var attrs = angular.copy(scope.$eval(attrs.attrs));
            element.attr(attrs).html(attrs.html);
        }
    };
});

并像这样使用它:

<div ng-repeat="item in items" attrs="item">{{item.html}}</div>

演示: http://plnkr.co/edit/QHEV1A0yawTzGEjvPiMq?p=preview