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

Question

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.

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.

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

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 StackOverflow, so if I wasn't clear please let me know! Thanks!

Why not template the button inside of the repeated span, and just insert the dynamic arguments as needed? E.g. <span ng-repeat="x in instrumentBtns"><button ng-attr-id="{{'instr' + x}}">0</button></span> — Brandon Anzaldi
– Brandon Anzaldi, Commented Apr 29, 2016 at 0:30
Because I didn't know that was a possibility, but it works! I'm pretty new to all this, thank you so much! How exactly does it work though? — Andrew McKeighan
– Andrew McKeighan, Commented Apr 29, 2016 at 0:38
Not a problem! Angular's a bit of a beast to wrap your head around. This is all part of Angular's interpolation. It takes prefixed attributes in your view, and interprets them as Angular expressions. This allows you to manipulate more than just the text on your page with angular, while not having to put the logic into your controller. It's more complex than that, but there's only so much I can write in a comment. Feel free to contact me directly if you'd like more detail. (Email's in profile) — Brandon Anzaldi
– Brandon Anzaldi, Commented Apr 29, 2016 at 0:45

Diego Polido Santana · Accepted Answer · 2016-04-29 01:06:08Z

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>

edited Apr 29, 2016 at 1:06

answered Apr 29, 2016 at 0:22

Diego Polido Santana

1,43511 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brandon Anzaldi Over a year ago

This is absolutely a great answer, particularly if you're loading HTML from untrusted sources. (User input/parameters) As any infosec person will tell you, never trust the client.

Diego Polido Santana Over a year ago

sure.. use it carefully! ;)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related