Specify element in ng-repeat AngularJS

Question

Consider this example:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js"></script>
<script>
angular.module('app', [])
</script>
<div ng-app='app'>

<div ng-init="tags  = ['i', 'b', 't']">
<div ng-repeat = 't in tags'>{{t}}</div>

</div>
</div>

Demo

This works as supposed, however I would like to be able to specify the element or attribute.

<div ng-init="tags  = ['i', 'b', 't']">
<{{t}} ng-repeat = 't in tags'>{{t}}</{{t}}>

This doesn't work: Demo

How can I do this? I basicly want to build a html-structure (with my own directives) from json. Is it good or bad best practise to do this?

mathieu · Accepted Answer · 2014-12-03 14:03:27Z

2

You can use a directive with a custom transclusion function to achieve this :

.directive('bindTagName', ['$compile', function ($compile) {
    return {
        transclude: true,
        replace: true,
        link: function (scope, elem, attrs, controller, transcludeFn) {
            // get tag name
            var tagName = scope.$eval(attrs.bindTagName);

            // create new tag
            var created = angular.element(document.createElement(tagName));

            // replace current element with created tag
            elem.replaceWith(created);

            // call transclude function
            transcludeFn(
                function (clone, scope) {
                    $compile(created.append(clone))(scope);
                }
            );
        }
    }
}])

Given the following view :

<div ng-init="tags  = ['i', 'b', 't']">
    <div ng-repeat = 't in tags' bind-tag-name="t">-&gt; {{t}}</div>
</div>

It will produce the following html :

<div ng-init="tags  = ['i', 'b', 't']">
    <!-- ngRepeat: t in tags -->
    <i><span class="ng-binding ng-scope">-&gt; i</span></i>
    <!-- end ngRepeat: t in tags -->
    <b><span class="ng-binding ng-scope">-&gt; b</span></b>
    <!-- end ngRepeat: t in tags -->
    <t><span class="ng-binding ng-scope">-&gt; t</span></t>
    <!-- end ngRepeat: t in tags -->
</div>

edited Dec 3, 2014 at 14:03

answered Dec 3, 2014 at 11:05

mathieu

31.3k4 gold badges67 silver badges91 bronze badges

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

4 Comments

user1506145 Over a year ago

Thanks, but this doesn't work with custom directives: plnkr.co/edit/LQ0s2DfpivvTZhDWGy4w?p=preview Also the elements are surrounded with b -ish stuff.

user1506145 Over a year ago

As you see in the plnkr, the bindTagName-directive is unable to create the directive 'test'.

user1506145 Over a year ago

Thanks, now it works as expected. But I have a question, when I look at the component in developer tools it looks like this: b . Why does it get wrapped like this? Is there anyway to avoid it? Demo: plnkr.co/edit/LQ0s2DfpivvTZhDWGy4w?p=preview

mathieu Over a year ago

Looks like to be default behavior : groups.google.com/forum/#!topic/angular/5SaF085FANw

Assaf · Accepted Answer · 2014-12-03 10:23:16Z

0

I don't know if you can manipulate the HTML tags themselves with angular. However I can think of something that would work:

<div ng-app="app" ng-controller="appController">
    <div ng-init="tags = ['i', 'b', 't']">
        <i ng-show="t == 'i'" ng-repeat ="t in tags">{{t}}</i>
        <br/>
        <b ng-show="t == 'b'" ng-repeat ="t in tags">{{t}}</b>
        <br/>
        <t ng-show="t == 't'" ng-repeat ="t in tags">{{t}}</t>
        <br/>
    </div>
</div>

I'm not sure this would solve your problems. For each tag you would like to used you have to write that tag and just show it or hide it depending on input.

example in JSFiddle.

answered Dec 3, 2014 at 10:23

Assaf

1,38010 silver badges19 bronze badges

1 Comment

user1506145 Over a year ago

That is great, but what if i have hundreds of different directives? Or if I change the name of a directive, I have to change this as well. I want to avoid putting too much logic in html.

New Dev · Accepted Answer · 2014-12-03 17:26:53Z

0

You could do something like the following:

<div ng-init="tags = ['span', 'span', 'div']">
   <span ng-repeat="t in tags track by $index" 
         ng-bind-html="'<' + t + '>' + t + '</' + t + '>'">
   </span>
</div>

but, that will add a wrapping  element.

EDIT: this requires adding a reference to angular-sanitize.js and adding a module dependency to your app, such that it would automatically sanitize the unsafe HTML:

angular.module("myApp", ["ngSanitize"])

edited Dec 3, 2014 at 17:26

answered Dec 3, 2014 at 11:03

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

2 Comments

user1506145 Over a year ago

Thanks, but this doesn't work for custom directives, also you need to filter to unsafe html. plnkr.co/edit/1py7Iuc3cEz5FfRN0Rvv?p=preview

New Dev Over a year ago

you don't need to filter explicitly like you did in your plunker - just add "ngSanitize" as your module dependency. And, if by "custom directives" you mean that it won't compile angular code, then yes - this would not work and you should follow the directive approach suggested in another answer.

Collectives™ on Stack Overflow

Specify element in ng-repeat AngularJS

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related