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 }); };
Labels: AngularJS
8 Comments:
helpful
Thanks Prashant.
Thank you Java maestro
Great Work sir
Nice
Thanks.
It might help you.
http://www.code-sample.com/2014/05/angularjs-interview-questions-and.html
http://www.code-sample.com/2014/01/knockout-js-interview-questions-and.html
Sir, Can u add some Form and Form submit examples over here.
Thanks
Post a Comment
Subscribe to Post Comments [Atom]
<< Home