Using Angular and ng-repeat to add Attributes to an HTML DIV

Question

we are using AngularJS and we are looking to create a series of HTML DIVs using ng-repeat with different HTML Attributes for each DIV.

For example we have the following list representing the DIVs we wish to create

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

and would like to create the following 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>

I have the following Javascript

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

Where items is the key value pair from the above example.

Any help is most appreciated

dfsq · Accepted Answer · 2015-11-12 16:39:02Z

3

The most flexible and clean approach would be to create very simple directive to create necessary attributes:

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

and use it like this:

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

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

answered Nov 12, 2015 at 16:39

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gzc · Accepted Answer · 2015-11-12 16:45:13Z

2

You can access on the values like this:

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

But your html wouldn't be rendered correct if you have html tags inside. Use this instead:

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

Have a look at https://docs.angularjs.org/api/ng/directive/ngBindHtml

edited Nov 12, 2015 at 16:45

gzc

8,6998 gold badges45 silver badges63 bronze badges

answered Nov 12, 2015 at 16:22

RWAM

7,0583 gold badges37 silver badges48 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:27:12Z

0

When things go to complex in AngularJS, try to refactor. For that I would use some sort of directive.

There is already an answer in Stack Overflow, check it here: Dynamic Attributes with AngularJS

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Nov 12, 2015 at 16:22

Thomas Kerbrat

1261 silver badge8 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:59:02Z

0

You can simply put your div to generate inside ng-repeat and set attributes and html

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

this would work as long as you item.html is raw text. for html tags refer this Q&A

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Nov 12, 2015 at 16:20

asdf_enel_hak

7,6585 gold badges47 silver badges91 bronze badges

Collectives™ on Stack Overflow

Using Angular and ng-repeat to add Attributes to an HTML DIV

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related