使用Angular和ng-repeat將屬性添加到HTML DIV

Question

我們正在使用AngularJS，並且正在尋求使用ng-repeat為每個DIV創建具有不同HTML屬性的一系列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>

其中項目是上述示例中的鍵值對。

任何幫助是最感激的

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標簽的信息，請參閱此問答

Answer 4

當AngularJS中的事情變得復雜時，請嘗試重構。 為此，我將使用某種指令。

堆棧溢出中已有一個答案，請在此處檢查： AngularJS的動態屬性