CODEWITHSUNDEEP
javascriptangularjs
Astaroth
Astaroth

Reputation: 783

Dynamically load templates (partials) in Angular.js

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/

Upvotes: 6

Views: 7360

Answers (4)

Frane Poljak
Frane Poljak

Reputation: 2365

Create directive for that, something like:

app.directive('myDirective', function(){
  return {
    restrict: 'E',
    scope: {item: '=item'},
    templateUrl: function(element, attrs){
      if (!attrs.type) return 'default.html';
      return attrs.type + '.html';
    }
  } 
});

Then you can create different templates like type1.html, type2.html...

And in controller you just do:

<my-directive ng-repeat="item in items" item="item", type="item.type">

Upvotes: 3

micronyks
micronyks

Reputation: 55443

Based on conditions you can load single or multiple templates as shown below.

With ng-switch

ng-if="item.type=='type2'||item.type=='type3'"

LoadMultipleTemplate To load multiple template based on your selections.

LoadSingleTemplate load single template.

Edit

With ng-include, this way you can load dynamic views.

in this example I've not put any condition. but within ng-repeat you can put another ng-repeat and based on inner ng-repeat you can do the stuff. But for inner ng-repeat you will have to make according json object.

loadViews

<div  ng-repeat="item in example.items" class="someClass" >

         <ng-include src="item.type + '.html'">{{item.type}}</ng-include>

</div>

Upvotes: 0

Raphael M&#252;ller
Raphael M&#252;ller

Reputation: 2200

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>

Upvotes: 3

A Macdonald
A Macdonald

Reputation: 824

Using ng-include lets you dynamically assign the source - so in your parent template you could have

<div ng-include src="templateName"></div>

where templateName is a variable name in your controller

$scope.templateName = 'path/to/my/template.html';

and changing this value within a digest should dynamically update the contents for you

Upvotes: 1

Related Questions