500+ Java/JEE Interview Questions and Answers

Use the discount coupon number "3D20455432" on Interview-Prep-90-Day, Interview-Prep-365-Day, and Interview-Prep-180-Day subscriptions. The coupon expires soon.

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
    });

 };




8 comments:

5 recent Java developer posts