Angular. How can I use variable in tagName

Question

I am new to angular and I wrote a simple code, but it doesn't work. Can someone explain me how can i get a tagName from input value. It's a sample, of course I want to assign this variable in data model, so text would be in I, B, U, or div class="something", but I want to change it on the fly.

<div ng-app>
  <div>
    <input type="text" ng-model="customTag" placeholder="Enter a name here" value="b">
    <{{customTag}}>77</{{customTag}}>
  </div>
</div>

You can try expression like `{{content}}` – Chandermani Nov 28 '13 at 12:38 — Chandermani, Nov 28 '13 at 12:38

score 0 · Answer 1 · answered Nov 28 '13 at 13:38

I think, you may have to write a directive for the same. I've defined a directive named, render which watches the customTag model to update the DOM.

Working Demo

myApp.directive('render', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            attrs.$observe('render', function(value) {
                if (value) {
                    element.html('<' + value + '>77</' + value + '>');      
                } else {
                    element.html(77);      
                }              
            });
        }
    };
});

Finally use it as shown below. ng-init allows you to set the default value for the model as value("b") does not work in this case.

<input ng-init="customTag='u'" type="text" ng-model="customTag" placeholder="Enter a name here" ng-change="update()"/>
<span render="{{customTag}}"></span>

Angular. How can I use variable in tagName

1 Answers1

Linked