Search code examples
angularjsangular-directive

Creating dynamic html elements in angularjs

I am trying to create some dynamic html elements in angular based on values I have stored in a SQL database. This is a prize selection application for work where I have 5 prizes which have descriptions associated and each description has a type (span, p, div, h1, etc). So based on what our DB says the line should be i want the html to create itself. The way the data is laid out is I have a data object that has an array of pictures and each picture object has an array of description objects { Pictures[ Descriptions[] ] }

"Pictures":[{"ID":9,"IDName":"messengerBag","Descriptions":[{"ID":7,"Text":"Messenger bag is a perfect size for most 15” laptops. The 10th anniversary logo is beautifully displayed in full detail on the front pocket.","DescriptionType":"h3"},{"ID":8,"Text":"Zippered main compartment includes a padded laptop sleeve.","DescriptionType":"p"},{"ID":9,"Text":"Velcro front pocket with organization panel.","DescriptionType":"p"}, {"ID":10,"Text":"Pen loop and side mesh pocket.","DescriptionType":"p"},{"ID":11,"Text":"Adjustable shoulder strap and two carry handles.","DescriptionType":"ul"},...

I have tried using the values directly and it did not work:

<div ng-repeat="pic2 in vm.data.Pictures" ng-show="{{$index}} == vm.index">
    <{{desc.DescriptionType}} ng-repeat="desc in pic2.Descriptions">{{desc.Text}}</{{desc.DescriptionType}}>
</div>

I then decided to try a directive. I could get it to return the text but never the element with the description type i was hoping for.

.directive("dynamicelement", ['$compile', function ($compile) {
    return {
        restrict: "E",
        scope: { desc: '@' },
        template: '<' + '{{header}}' + '>' + '{{header2}}' + '</' + '{{header}}' + '>',
        controller: function ($scope) {
            $scope.header = "p";
            $scope.header2 = "hi";
        }
    }
};

I have read article where they talked about using $compile and needing a link function in my directive but i'm not really sure how to use those.

I also have an example of using ngSwitch from How can I use Angular to output dynamic form fields? but this didn't seem to lend itself to my dual ng-repeat organization I am currently using.

Is what I am trying to accomplish possible and if so anyone have pointers on what I should be looking at? Thanks for your time.

Solution

  • I was able to use ng-if's to solve this. It's not as clean as I had hoped but it is doing the trick.

        <div data-ng-repeat="pic2 in vm.data.Pictures" class="picture{{$index}} pictures">
        <div data-ng-repeat="desc in pic2.Descriptions">
            <p data-ng-if="desc.DescriptionType=='p'">{{desc.Text}}</p>
            <span data-ng-if="desc.DescriptionType=='span'">{{desc.Text}}</span>
            <div data-ng-if="desc.DescriptionType=='div'">{{desc.Text}}</div>
            <label data-ng-if="desc.DescriptionType=='label'">{{desc.Text}}</label>
            <h1 data-ng-if="desc.DescriptionType=='h1'">{{desc.Text}}</h1>
            <h2 data-ng-if="desc.DescriptionType=='h2'">{{desc.Text}}</h2>
            <h3 data-ng-if="desc.DescriptionType=='h3'">{{desc.Text}}</h3>
            <h4 data-ng-if="desc.DescriptionType=='h4'">{{desc.Text}}</h4>
            <h5 data-ng-if="desc.DescriptionType=='h5'">{{desc.Text}}</h5>
            <ul data-ng-if="desc.DescriptionType=='ul'"><li>{{desc.Text}}</li></ul>
            <ol data-ng-if="desc.DescriptionType=='ol'"><li>{{desc.Text}}</li></ol>
        </div>
    </div>