Geek Answers Handbook

How to embed html code with ng-repeat in AngularJS?

I want to create a series of buttons in a div using ng-repeat. And then for the div to be cloned / duplicated somehow.

Basically, it will look something like this:

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

And I also want to make a div that is in the duplicated below. I used to use a clone, but I need to use ng-repeat, and it was not so successful.

<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 still looks like this.

 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 on StackOverflow, so if I don’t get it, let me know! Thanks!

+5
source share
1 answer

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>
+4
source

More articles:


All Articles