如何在 AngularJS 中使用 ng-repeat 插入 html 代码？

Question

我想使用 ng-repeat 在 div 中创建一行按钮。然后让 div 以某种方式成为 cloned/duplicated。

基本上是这样的；

[0][0][0][0]

而且我还想复制下面的 div。我以前使用过克隆，但我需要使用 ng-repeat，但效果不佳。

<body ng-app="myApp" ng-controller="myCtrl">
...
...
...
<div id="boxHolder">
<span id="musicBox" ng-repeat="x in instrumentBtns">
{{x}}
</span>
</div>

这就是我的 html。到目前为止，我的 app.js 文件如下所示。

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
  $scope.instrumentBtns = [
    '<button id="inst0">0</button>',
    '<button id="inst1">0</button>',
    '<button id="inst2">0</button>',
    '<button id="inst3">0</button>',
  ]
});

首先 post 到 Whosebug，所以如果我不清楚，请告诉我！谢谢！

Answer 1

使用ngSanitize

angular.module('sanitizeExample', ['ngSanitize'])
           .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
  $scope.htmlTrusted = function(html) {
    return $sce.trustAsHtml(html);
  }
}]);

<span id="musicBox" ng-repeat="x in instrumentBtns">
  <div ng-bind-html="htmlTrusted(x)"></div>
</span>

如何在 AngularJS 中使用 ng-repeat 插入 html 代码？

How do I insert html code using ng-repeat in AngularJS?

html

javascript

angularjs

ng-repeat

angularjs-ng-repeat