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

Question

我想使用ng-repeat在div中創建一行按鈕。 然后以某種方式克隆/復制該div。

基本上所以它看起來像這樣;

[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>',
  ]
});

首先發布到StackOverflow，所以如果我不清楚請告訴我！ 謝謝！

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代碼？

問題描述

1 個解決方案

解決方案1
4 已采納 2016-04-29 00:22:39

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

問題描述

1 個解決方案

解決方案1 4 已采納 2016-04-29 00:22:39

解決方案1
4 已采納 2016-04-29 00:22:39