Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML template in AngularJS like KnockoutJS
    text
    copied!<p>HTML templates can be used multiple times with supplied data as object in KnockoutJS, I am getting difficulties in finding the same feature with AngularJS. Take a look at below URL of KO documentation.</p> <p><a href="http://knockoutjs.com/documentation/template-binding.html" rel="nofollow">http://knockoutjs.com/documentation/template-binding.html</a></p> <pre><code>&lt;div data-bind="template: { name: 'person-template', data: buyer }"&gt;&lt;/div&gt; &lt;div data-bind="template: { name: 'person-template', data: seller }"&gt;&lt;/div&gt; &lt;script type="text/html" id="person-template"&gt; &lt;h3 data-bind="text: name"&gt;&lt;/h3&gt; &lt;p&gt;Credits: &lt;span data-bind="text: credits"&gt;&lt;/span&gt;&lt;/p&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; function MyViewModel() { this.buyer = { name: 'Franklin', credits: 250 }; this.seller = { name: 'Mario', credits: 5800 }; } ko.applyBindings(new MyViewModel()); &lt;/script&gt; </code></pre> <p>You can observe how "buyer" and "seller" are passed as object to template, and rendered accordingly with Knockout JS.</p> <p>I want similar implementation with AngularJS. Take a look at below example.</p> <pre><code>&lt;script type="text/ng-template" id="someId"&gt;{{name}}&lt;/script&gt; &lt;ng-include src="'someId'" onload="name='FirstValue'" &gt;&lt;/ng-include&gt; &lt;ng-include src="'someId'" onload="name='SecondValue'" &gt;&lt;/ng-include&gt; </code></pre> <p>I tried something like above, but finally both ng-include will generate "test1" text. I want different result for both ng-include, for first "FirstValue" and for second "SecondValue" </p> <p>Take a look at here: <a href="http://plnkr.co/edit/DQgPZ9GKKLnwSvOggY3M?p=preview" rel="nofollow">http://plnkr.co/edit/DQgPZ9GKKLnwSvOggY3M?p=preview</a></p> <p>How can I pass data object to such html template and render accordingly?. </p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload