ng-json-html

Convert json to html tags and angular compile data

Demo

https://minasvisual.github.io/ng-json-to-html/

usage

clone repository

git clone https://github.com/minasvisual/ng-json-html.git

Add script after your angular import

<script src="./ng-json-html/ngJsonHtml.js"></script>

Import module on angular app

var app = angular.module('myApp', ['ng-json-html']);

create your json tree

$scope.myJson = { 
    "h1|.[bg-warning]|#[title]":"{{ nameVar }}", 
    "div|ng-if=[nameVar != 'Hello World']":{ 
        "h4":'Sub Item', 
        'p':"Descrição etc e tal"
    }, 
    'ul|.[list-group]':[
        {'li|.[list-group-item]':
            { "a":"item 1", "i|.[fa fa-plus]":"icon"} 
        }, 
        {'li|.[list-group-item]':"item 2"}
    ]  
};

Set dynamic attribute on your content div

<div dynamic="myjson">\</div>

Syntax:

Object key: { "|||.." }

.[] = class=""
#[] = id=""
@[] = href=""
[] can be defined normaly =""

Troubleshoot

Object keys of json need to be unique in the same level of tree. Define a id or class to be unique in this case:

{
    "div|#[1]": "my div",
    "div|#[2]": "my div 2"
}

Author: Ulisses Mantovani
[email protected]
www.megagencia.com.br