Ques 16. How will you display different images based on the status being red, amber, or green?
Use the ng-switch and ng-switch-when directives as shown below.
<div ng-switch on="account.status">
<div ng-switch-when="AMBER">
<img class="statusIcon"
src='apps/dashboard/amber-dot.jpg' />
</div>
<div ng-switch-when="GREEN">
<img class="statusIcon"
src='apps/dashboard/green-dot.jpg' />
</div>
<div ng-switch-when="RED">
<img class="statusIcon"
src='apps/dashboard/red-dot.jpg' />
</div>
</div>
Ques 17. How will you initialize a select box with options on page load?
Use the ng-init directive.
<div ng-controller="apps/dashboard/account" ng-switch
on="!!accounts" ng-init="loadData()">
Ques 18. How will you show/hide buttons and enable/disable buttons conditionally?
Using the ng-show and ng-disabled directives.
<div class="dataControlPanel"
ng-show="accounts.releasePortfolios">
<div class="dataControlButtons">
<button class="btn btn-primary btn-small"
ng-click="saveComments()" ng-disabled="disableSaveButton">Save</button>
<button class="btn btn-primary btn-small"
ng-click="releaseRun()" ng-disabled="disableReleaseButton">Release</button>
</div>
</div>
Ques 19. How will you loop through a collection and list each item?
Using the ng-repeat directive.
<table
class="table table-bordered table-striped table-hover table-fixed-head portal-data-table">
<thead>
<tr>
<th>account</th>
<th>Difference</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr
ng-repeat="account in acounts">
<td width="40%">{{account.accountCode}}</td>
<td width="30%" style="text-align: right">{{account.difference
| currency: ""}}</td>
<td width="30%">
<div ng-switch on="account.status">
<div ng-switch-when="AMBER">
<img class="statusIcon"
src='apps/dashboard/amber-dot.jpg' />
</div>
<div ng-switch-when="GREEN">
<img class="statusIcon"
src='apps/dashboard/green-dot.jpg' />
</div>
<div ng-switch-when="RED">
<img class="statusIcon"
src='apps/dashboard/red-dot.jpg' />
</div>
</div>
</td>
</tr>
</tbody>
</table>
Ques 20. How will you add options to a select box?
Using the ng-options and ng-model directives.
<fieldset>
<dl class="control-group">
<dt>
<label for="cientId">
<h4>Client Id:</h4>
</label>
</dt>
<dd>
<select id="cientId" class="input-xlarge" ng-model="clientId"
ng-options="reportClient.clientId as reportClient.clientId for reportClient in reportClients "
ng-click="getReportParams()" ng-change="getValuationDates()" />
</dd>
</dl>
<dl class="control-group">
<dt>
<label for="valuationDate">
<h4>
Valuation Date <small>(dd/mm/yyyy)</small>
</h4>
</label>
</dt>
<dd>
<select id="valuationDate" class="input-xlarge"
ng-model="valuationDate"
ng-options="reportdate for reportdate in reportDates" />
</dd>
</dl>
</fieldset>