Question

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

例如，我们有以下列表代表我们希望创建的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

Answer 2

您可以访问以下值：

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

但是如果你内部有html标签，你的HTML将无法呈现。请改用：

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

查看https://docs.angularjs.org/api/ng/directive/ngBindHtml

Answer 3

你可以简单地把你的div放在ng-repeat内部并设置属性和html

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

只要您的item.html是原始文本，这将有效。对于html标签，请参阅this Q&A

Answer 4

当AngularJS中出现问题时，请尝试重构。为此，我会使用某种指令。

Stack Overflow中已有答案，请在此处查看： Dynamic Attributes with AngularJS

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

4 个答案: