Article Details
Id: | 17419 |
Product: | finPOWER Connect |
Type: | NEW |
Version: | 3.03.04 |
Opened: | 23/09/2020 |
Closed: | 02/10/2020 |
Released: | 02/12/2020 |
Job: | J025113 |
HTML Widgets and Portals; Angular style tags; New "ng-termplate" tag
A new Angular-style tag named "ng-template" can be used in HTML Widgets and Portals.
This can be used to represent complex HTML structures that you may want to appear more than once when data binding.
The example below shows a loop that repeats a "template":
<div ng-repeat="for item in mRecord.Upcoming">
<div ng-bind="item.Description"></div>
<div ng-template="templateOpportunity"></div>
</div>
<!-- BEGIN Templates -->
<div style="display:none">
<!-- BEGIN Opportunity Template -->
<div id="templateOpportunity">
<div class="header">
<h1 ng-bind="item.Status"></h1>
<h2 class="description" ng-bind="item.Description"></h2>
</div>
<div class="image"><img ng-bind-attribute-name="src" ng-bind-attribute-value="item.ImageUrl" /></div>
<div class="details">
<div class="type"><h3>Type</h3><div ng-bind="item.Type"></div></div>
<div class="term"><h3>Term</h3><div>12 Months</div></div>
<div class="return"><h3>Return</h3><div>14.32% p.a.</div></div>
<div class="security"><h3>Security</h3><div>1st Mortgage</div></div>
</div>
<!-- END Opportunity Template -->
</div>
<!-- END Templates -->
NOTE: Any element with an "ng-template" attribute will have its child elements cleared before inserting the contents of the template, i.e., the template will become the content of the element.
Nested Templates are not supported.