Menu
I'm trying to load a template into an Angular app depending on a parameter. It would be inside a ng-foreach:
<body ng-app="MyApp" ng-controller="ExampleController as example">
<div ng-repeat="item in example.items" class="someClass" ng-switch="item.type">
<!-- load a different template (partial) depending on the value of item.type -->
</div>
</body>
Fiddle: https://jsfiddle.net/rsvmar2n/1/
Can I somehow do that? I was thinking about using ng-switch: https://jsfiddle.net/rsvmar2n/6/
But I'm sure there's a more angular way to do it.
Edit: I would like NOT to do an http request for every partial I would load (and I think ngInclude does that.
Edit2: Ended using ng-include and cached templates. https://jsfiddle.net/rsvmar2n/24/
278
You can call a function which returns the id of the template in ng-include and use cached templates. The working example shows what you can do.
the function in your controller which handles the template looks like:
$scope.getTemplate = function(item) {
switch(item.type)
{
case "type1":
return 'testtype1.html';
default:
return 'testtype2.html';
}
}
and your html
<script type="text/ng-template" id="testtype1.html">
<p>This is the template 1</p>
</script>
<script type="text/ng-template" id="testtype2.html">
<p>This is the template 2</p>
</script>
<body ng-app="MyApp" ng-controller="ExampleController">
<div ng-repeat="item in items" class="someClass">
<!-- load a different template (partial) depending on the value of item.type -->
<div ng-include="getTemplate(item)"></div>
</div>
</body>
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
