I need to create HTML elements from JSON file with AngularJS

Question

I know there is other answers on this question, but i need to do it a in specific way. I started already and i'm almost there but need some advice.

So here is my Controller :

angular.module('dynamicForm.home-ctrl',[])
        .config(['$routeProvider', function($routeProvider){
            $routeProvider.when('/', {
                templateUrl: 'app/home/home.html',
                controller: 'HomeController'
            })
        }])
        .controller('HomeController', ['$scope','$http', 'fileName', function($scope, $http, fileName){
            $http.get(fileName)
                .then(function(response){
                    $scope.content = response;
                });

        }])

The JSON string has elements like this one :

  [
    {
      "id": "1",
      "title": "First Name",
      "summaryTitle": "First Name",
      "sort": "100",
      "paramName": "fname",
      "type": "text",
      "image": "icon-Profile",
      "placeholder" : "ex. John",
      "required": true
    },
    {
      "id": "2",
      "title": "Last Name",
      "summaryTitle": "Last Name",
      "sort": "200",
      "paramName": "lname",
      "type": "text",
      "placeholder" : "ex. Smith",
      "required": true
    }
  ],

And here is my custom directive ->

.directive('dynamic-tag',[function() {

        var getTemplate = function (tag) {
            var template = '';
            if (tag.type === 'text') {
                template += angular.element(tag.title + '<br />' + '<input type="'
                    + tag.type + '" id="'
                    + tag.id + '" title="'
                    + tag.summaryTitle + '" name="'
                    + tag.paramName + '" placeholder="'
                    + tag.placeholder + '" required="'
                    + tag.required + '" /><br />');
            }
            return template;
        };
}]);

So how i'm suppose to use this custom tag into my template so to render every new element as a html element. Should i use ng-repeat and if yes how exacly?

If its possible keep your answers as much as can near to my logic if its possible.

Thanks in advance ! :)

P.S. --> JSFiddle - https://jsfiddle.net/jevccgxw/1/

Yes i will... in a minutes will edit the question with the Fiddle — user3027778
– user3027778, Commented Apr 20, 2016 at 17:27
looks like you might have the right answer below. Basically same as I was gonna do, just written a little differently. I'm not sure what the $compile is about... I think you can do without. Have you got it working? — Jeffrey Coleman
– Jeffrey Coleman, Commented Apr 20, 2016 at 20:10

David Tao · Accepted Answer · 2016-04-20 19:12:58Z

After I tested in my app, this directive will work for you:

//the directive 
.directive('dynamicTag', ['$compile',
    function($compile){
        return{
            restrict: 'A',
            scope: {
                tag: '='
            },
            link: function(scope, element, attrs){

                var getTemplate = function() {
                    var template = '';

                    if (scope.tag.type === 'text') {
                        template =  '{{tag.title}}' + 
                                    '<br />' + 
                                    '<input type="{{tag.type}}" ' +
                                    'id="{{tag.id}}" ' +
                                    'title="{{tag.summaryTitle}}" ' +
                                    'name="{{tag.paramName}}" ' +
                                    'placeholder="{{tag.placeholder}}" ' +
                                    'required="{{tag.required}}" ' +
                                    '/><br />';
                    }
                    return template;
                };

                var compile = function() {
                    var template = getTemplate();
                    element.append(template);
                    $compile(element.contents())(scope);
                };

                compile();
            }
        }
}]);


//in the html code:
<div ng-repeat="tag in content" dynamic-tag tag="tag"></div>

A working fiddle is here, fix some bugs and add a service: https://jsfiddle.net/gy6kqq5w/

Hope this can help you, let me any questions plz :)

Collectives™ on Stack Overflow

I need to create HTML elements from JSON file with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related