Angular js dynamic div creation

Question

I have created dynamic div on the basis of an array values using jquery. It works fine,The following is the code for jquery,

$(document).ready(function () {
    var i = 1;
    var arr = ["a", "b", "c"];
    /*arr=;*/
    //arr = doc.slice();

    $(window).load(function () {
        alert(arr[1] + ":" + arr.length);
        for (i = 0; i < arr.length; i++) {
            var ele = document.createElement("div");
            ele.setAttribute("id", "child" + i);
            ele.setAttribute("class", "span4 greenDark");
            ele.innerHTML = '<object type="text/html" data="iindex.html" ></object>';
            document.getElementById("mydiv").appendChild(ele);
        }
    });
});

But I need to do this same function in angular js ng-init method call. But the angular code didint create any div. I have tried the following code,

var arr = ["a", "b", "c"];
alert("load" + arr);

for (i = 0; i < arr.length; i++) {
    alert("load" + arr[i]);
    var ele = document.createElement("div");
    ele.setAttribute("id", "child" + i);
    ele.setAttribute("class", "span4 greenDark");
    ele.innerHTML = '<object type="text/html" data="iindex.html" ></object>';

    // angular.element(document.getElementById("mydiv").appendChild(ele));
    angular.element(document.getElementById('mydiv')).append($compile("<div><button class='btn btn-default' data-alert=" + scope.count + ">Show alert #" + scope.count + "</button></div>")(scope));
}

I need help.

write a directive for that

Ebin Manuval
– Ebin Manuval

2016-05-30 03:56:27 +00:00
Commented May 30, 2016 at 3:56 — Ebin Manuval
– Ebin Manuval, Commented May 30, 2016 at 3:56
how to write a directive for this function.?

LearnCode Master
– LearnCode Master

2016-05-30 03:59:42 +00:00
Commented May 30, 2016 at 3:59 — LearnCode Master
– LearnCode Master, Commented May 30, 2016 at 3:59

Ebin Manuval · Accepted Answer · 2016-05-30 04:20:12Z

<div my-directive myarray="myarray"></div>



  angular.module('sampleApp', [])
  .controller('myCtrl', function($scope) {
    $scope.myarray = ["a","b","c"];
  })
  .directive("myDirective", function($compile) {
    return {
      template: "<div></div>",
      restrict: 'EA',
      scope: {
        myarray: '='
      },
      link: function(scope, element, attrs) {  
         var template='<div ng-repeat="item in myarray"><button class="btn btn-default" >item#{{$index}}</button></div>';

            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
      }

    }
  });

checkout the fiddle https://jsfiddle.net/ebinmanuval/rpjacmy2/3/

Huy Chau · Accepted Answer · 2016-05-30 03:55:44Z

0

Controller:

Create a function to return this HTML:

function initButton () {

  var arr = ['a', 'b', 'c'];
  var html = '';

  for (var i = 0, length = arr.length; i < length; i++) {
    html += "<div><button class='btn btn-default' data-alert=" + i + ">Show alert #" +i"</button></div>";
  }

  return html; 

}


$scope.buttonHTML = initButton();

View:

<div ng-bind-html="buttonHTML"></div>

answered May 30, 2016 at 3:55

Huy Chau

2,24821 silver badges26 bronze badges

1 Comment

Aluan Haddad Over a year ago

remember to include angular-sanitize.

Collectives™ on Stack Overflow

Angular js dynamic div creation

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related