Angular JS Questions and Answers

Q. How will you display different images based on the status being red, amber, or green?
A. 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>

Q. How will you initialize a select box with options on page load?
A. using the ng-init directive.

<div ng-controller="apps/dashboard/account" ng-switch
 on="!!accounts" ng-init="loadData()">

Q. How will you show/hide buttons and enable/disable buttons conditionally?
A. 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>

Q. How will you loop through a collection and list each item?
A. 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>

Q. How will you add options to a select box?
A. 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>

Q. How will you display inprogress revolving image to indicate that RESTful data is bing loaded?
A.

<div ng-show="loading">
 <img class="loading" src="portal/images/loading_32.gif" />
</div>

   $scope.loadReportData = function($http) {
  $scope.loading = true;  // start spinng the image
  $http(
    {
     method : 'GET',
     url : propertiesService.get('restPath')
       + '/myapp/portfolio/'
       + $scope.clientId
       + '/'
       + dateService
         .userToRest($scope.reportDate),
     cacheBreaker : true
    }).success(
    function(data, config) {
     $scope.reportData = data;
     portal.log('reportData: ',
       $scope.reportData);
     $scope.loading = false;   // stop spinning the image
    }).error(
    function(data, status, headers, config) {
     if(data.errorMsg != null) {
      $scope.httpError = data.errorMsg;
     }
     else {
     $scope.httpError = "Error retrieving data from " + errorService
       .getApacheErrorTitleMessage(status,
         data, config);
        }
     $scope.loading = false;  // stop spinning the image
    });

 };