angularjs: dynamic html dependent on json data

Question

I want to show the content of my json model in a dynamic way, depending on the provided json. I use ng-repeat to loop through my data and want to display a html template to fill with data dependent on the encountered data type.

JSON

{
    "elements": [
        {
            "type": "input-text",
            "desc": "Full Name"
        },
        {
            "type": "input-checkbox",
            "desc": "Accept Terms"
        }
    ]
}

This should result in different html code, appropriate filled with the json content.

E.g.

<div><label>Full Name</label> <input type="text"></div>
<div><input type="checkbox"> <label>Accept Terms</label></div>

Right now what I do is to use an angularjs directive to create an element and add the json values to the right spot. e.g. element.html('<div><input type="checkbox"> <label>' + scope.item.desc + '</label></div>') That seems like the jquery way (or worse) to do it although I want to do it the 'right' angularjs way.

How can I use a different HTML template filled with content, dependent on the encountered JSON data?

PS: The above example is a simple one, the encountered data is far more complex than switching the position of the label and input field.

You can use resource for getting json, if you want to use different json, you could do just .../:name.json. Seems here's the right example docs.angularjs.org/tutorial/step_08. — Oleksandr Verhun
– Oleksandr Verhun, Commented Mar 27, 2015 at 7:44
onehungrymind.com/angularjs-dynamic-templates This should be what you want. — Huy Hoang Pham
– Huy Hoang Pham, Commented Mar 27, 2015 at 7:50
Just for reference: I know how to http.get() the json, fill my scope and ngRepeat over the elements , just the part to use different HTML blocks (with data) bothered me. Thanks @Huy for linking your helpful article and also the comments there help a lot. — Peter Kennedy
– Peter Kennedy, Commented Mar 27, 2015 at 8:34

deceze · Accepted Answer · 2015-03-27 07:44:52Z

1

All you need to do is set the data on the scope, then use the ng-repeat directive in your HTML to output it:

Controller:

.controller('MyData', function ($scope) {
    $scope.myModel = {
        elements: [ { desc: .. }, .. ]
    };
})

You would be using the $http service or some other appropriate method in this controller to populate myModel with data, but in the end the data needs to end up on the $scope object somehow. Then it's the template's job to display that data:

<div ng-controller="MyData">
    <ul>
        <li ng-repeat="element in myModel.elements">
            {{ element.desc }}
        </li>
    </ul>
</div>

answered Mar 27, 2015 at 7:44

deceze♦

525k89 gold badges806 silver badges954 bronze badges

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

Comments

Peter Kennedy · Accepted Answer · 2015-03-27 08:49:55Z

1

A simple solution seems to use ngSwitch with different HTML paths, e.g.:

<div ng-switch="item.type">
    <div ng-switch-when="input-text">
      <div><label>{{item.desc}}</label> <input type="text"></div>
    </div>
    <div ng-switch-when="input-checkbox">
      <div><input type="checkbox"> <label>{{item.desc}}</label></div>
    </div>
    <div ng-switch-default>Unknown item.type: {{item.type}}</div>
</div>

Seems the approach using an angularjs directive (which I took first) may be a good solution for complex scenarios as "Huy Hoang Pham" points out in his blog post: http://onehungrymind.com/angularjs-dynamic-templates/ (thanks!)

answered Mar 27, 2015 at 8:49

Peter Kennedy

5716 silver badges12 bronze badges

Collectives™ on Stack Overflow

angularjs: dynamic html dependent on json data

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related