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

【问题标题】：Using Angular and ng-repeat to add Attributes to an HTML DIV使用 Angular 和 ng-repeat 将属性添加到 HTML DIV
【发布时间】：2016-02-14 01:20:34
【问题描述】：

我们正在使用 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 是上例中的键值对。

非常感谢任何帮助

【问题讨论】：

标签： javascript html angularjs angularjs-ng-repeat

【解决方案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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

当 AngularJS 中的事情变得复杂时，尝试重构。为此，我会使用某种指令。

Stack Overflow 中已经有答案了，在这里查看： Dynamic Attributes with AngularJS

【讨论】：

【解决方案4】：

您可以简单地将您的 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

【讨论】：