Question

我尝试在加载时将ng-repeat添加到我的HTML div中。它识别ng-repeat，但索引值不应显示为

HTML

<div id="myInnerCarousel"></div>

控制器：

var myCarousel = document.getElementById('myInnerCarousel');
var newItem = document.createElement("div");
newItem.setAttribute("class","item");

var newData = document.createElement("div");
newData.setAttribute("class", "col-xs-6 col-sm-6 col-md-3 col-lg-3");
newData.setAttribute("ng-repeat", "mat in " + arr);

//Create individual values seperately
var newMaterialName = document.createElement("h4");
var nameNode = document.createTextNode("{{mat.Name}}");
newMaterialName.appendChild(nameNode);
//Append everything together

newData.appendChild(newMaterialName);
newItem.appendChild(newData);
myCarousel.appendChild(newItem);

但结果如下：

https://gyazo.com/00b76c6b910d4c6701059d404783f720

它有正确的想法显示我的阵列，但角度不是正确显示h4。

编辑：imtrying在我的html中实现这一点：

<div ng-controller="myController">
<div class="item">
    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array1">
        <h4>{{mat.Name}}</h4>
    </div>
</div>
<div class="item">
    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array2">
        <h4>{{mat.Name}}</h4>
    </div>
</div>

Answer 1

让我们简单地说这不是这样做的方式。

更好，更有棱角的方式（假设您的应用名称为app）。

HTML

<div ng-controller="myController">
    <div class="item">
        <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array">
            <h4>{{mat.Name}}</h4>
        </div>
    </div>
</div>

角度控制器

angular.module('app').controller('myController', function($scope) {
    $scope.array = [{Name: 'abc'}, {Name: 'def'}]; // or whatever your data looks like.
});

Answer 2

应使用angular编译动态添加的组件。你可以使用$compile角度函数。 以下是工作代码。

Jsfiddle

function TodoCtrl($scope, $compile) {
    $scope.arr = [{Name: "Dynamically Added cowermponent"}];
    var myCarousel = document.getElementById('myInnerCarousel');
    var newItem = document.createElement("div");
    newItem.setAttribute("class","item");

    var newData = document.createElement("div");
    newData.setAttribute("class", "col-xs-6 col-sm-6 col-md-3 col-lg-3");
    newData.setAttribute("ng-repeat", "mat in arr");

    //Create individual values seperately
    var newMaterialName = document.createElement("h4");
    var nameNode = document.createTextNode("{{mat.Name}}");
    newMaterialName.appendChild(nameNode);
    //Append everything together

    newData.appendChild(newMaterialName);
    newItem.appendChild(newData);
    myCarousel.appendChild(newItem);
    $compile(newItem)($scope);
}

动态地将ng-repeat添加到HTML元素中

2 个答案: