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

时间:2022-06-18 07:34:53

I want to create a row of buttons in a div using ng-repeat. And then have that div be cloned/duplicated in some way.

我想使用ng-repeat在div中创建一行按钮。然后以某种方式克隆/复制该div。

Basically so it'll look something like this;

基本上所以它看起来像这样;

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

And I'd also want to make the div that that is in duplicated below. I used clone before, but I need to be using ng-repeat and that wasn't as successful.

而且我也想制作下面重复的div。我之前使用过克隆,但我需要使用ng-repeat,但这并不成功。

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

This is what I have for my html. My app.js file so far looks like this.

这就是我的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>',
  ]
});

First post to *, so if I wasn't clear please let me know! Thanks!

首先发布到*,所以如果我不清楚请告诉我!谢谢!

1 个解决方案

#1


4  

Use 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>

#1


4  

Use 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>