Menu
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!
465
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object.
The ng-bind-html directive is a secure way of binding content to an HTML element. When you are letting AngularJS write HTML in your application, you should check the HTML for dangerous code. By including the "angular-sanitize.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
