Angularjs动态div创建

Question

我使用 jquery 基于数组值创建了动态 div。运行正常，下面是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);
        }
    });
});

但我需要在 angular js ng-init 方法调用中执行相同的功能。但是 angular 代码没有创建任何 div。我试过下面的代码，

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));
}

我需要帮助。

Answer 1

Controller:

创建函数 return 这个 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>

Answer 2

<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);
      }

    }
  });

查看 fiddle https://jsfiddle.net/ebinmanuval/rpjacmy2/3/

Angularjs动态div创建

Angular js dynamic div creation

html

jquery

dynamic-content

angularjs