Joe Joe - 1 year ago 51
AngularJS Question

How to add template page dynamically with dynamic values in it in angularjs

Actually I'm very new to angularJS so I'm asking some basic questions which may seem silly to you geeks. I am habituate of jQuery a bit much thats why some confusion is there as docs are also very limited.

<html lang="en">
<meta charset="UTF-8">
<title>Example - example-example12-production</title>
<script src="//"></script>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller as c">
<button ng-click="c.showdiv()">show</button >
<div id="d"></div>

angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {

//do the ajax call and get the value from server
//pick the required template
//render the returned value on picked template


I want whenever I clicked and call showdiv() it should call ajax,get the value and render it in a template(say template.html) in div(id=d) section

Update: 1.say we have two button.if button1 is clicked then it will pick template1.html anf for button2 its template2.html.

2.ajax returns as {"Name":"AnyName","Age":"25"} like that
in template1.html has binding as


for button2 different value with different template style.

Answer Source

Update your div "d" to say:

<div id="d" ng-include="chosenTemplate"></div>

Update buttons:

<button ng-click="c.showdiv('template1.html')">show 1</button >
<button ng-click="c.showdiv('template2.html')">show 2</button >

Then add something like the following:

this.showdiv = function(theTemplate) {

    $scope.chosenTemplate = theTemplate;

    // do AJAX call using $http.get
    $scope.Name = "John Smith";
    $scope.Age = 25;

Also note:

As mentioned above you can add the showdiv function to the scope so you won't have to prefix it with "c." in your html.

As I mentioned above you are missing a closing square bracket ] at the end of your controller definition.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download