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

Question

我尝试在加载时将 ng-repeat 附加到我的 HTML div 中。它识别 ng-repeat，但是索引值没有按应有的方式显示

HTML

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

Controller :

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

它显示我的数组的想法是正确的，但是 Angular 没有正确显示 h4。

编辑:我正在尝试在我的 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

让我们简单地声明一下，这不是这样做的方法。

更好、更 Angular 方式是(假设您的应用程序名称是 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 Controller

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