AngularJS Interview Questions Part - 4

AngularJS Interview Questions Part - 4

Q 1.     How to create table in AngularJS?

Ans 1. Table can be constructed by repeating its rows. So, ng-repeat directive can be used to create table easily.

Example –

Features(defined with the help of $scope service inside controller)

$scope.Features = [{ FeatureName: 'Height', FeatureValue: '6ft' }, { FeatureName: 'Weight', FeatureValue: '80 Kg' }, { FeatureName: 'Complexion', FeatureValue: 'Fair' }];

<table>

<tr ng-repeat="feature in Features">

                        <td>{{feature.FeatureName}}</td>

   <td>{{feature.FeatureValue}}</td>

                      </tr>

            </table>

Output –

                                                      

Q 2.     How can application data be bound to HTML DOM in AngularJS?

Ans 2. We can bind application data to attributes of HTML DOM elements by using some directives available with AngularJS

Click here to watch more informative AngularJS Tutorial videos!

Q 3.    How to use ng-disabled directive in AngularJS?

Ans 3. The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.

Example-

<td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>

 <td><button ng-disabled="enableDisableButton">Click Me!</button></td>

Output - 

 In the above example the button enables and disables based on checking and unchecking the checkbox as the value of the property – enableDisableButton changes which is bound to checkbox control. This property is also used by ng-disabled directive.

Q 4.     How to use ng-show directive in AngularJS?

Ans 4. The ng-show directive shows or hides an HTML element. The ng-show directive shows (or hides) an HTML element based on the value of ng-show.

Example-

<td><input type="checkbox" ng-model="showHide1">Show Button</td>

<td><button ng-show="showHide1">Click Me!</button></td>

Output - 

In the above example the button shows and hides based on checking and unchecking of the checkbox as the value of the property – showHide1 changes which is bound to checkbox control. This property is also used by ng-show directive.

Q 5.     How to use ng-hide directive in AngularJS?

Ans 5. The ng-hide directive hides or shows an HTML element. The ng-hide directive hides (or shows) an HTML element based on the value of ng-hide.

Example-

<td><input type="checkbox" ng-model="showHide2">Hide Button</td>

<td><button ng-hide="showHide2">Click Me!</button></td>

Output - 

                                               

                                                             

In the above example the button shows and hides based on checking and unchecking of the checkbox as the value of the property – showHide2 changes which is bound to checkbox control. This property is also used by ng-hide directive.

Q 6.     What is the difference between ng-show and ng-hide?

Ans 6. Both offer each other’s opposite functionality.

Example –

<td><input type="checkbox" ng-model="showHide3">Hide Button</td>
<td><button ng-show="showHide3">Click Me!</button></td>

<td><button ng-hide="showHide3">Click Me!</button></td>

In the above example when the checkbox is checked, button having directive ng-show will show and button having directive ng-hide will hide.

When the checkbox is unchecked, button having directive ng-show will hide and button having directive ng-hide will show.

Q 7.     How to use ng-click directive in AngularJS?

Ans 7. The ng-click directive defines AngularJS code that will be executed when the element is being clicked.

Example –

<td><p>Total click: {{ clickCounter }}</p></td>

<td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>

Output - 

                                                   

                                  

In the above example, whenever the button is clicked, the operation - "clickCounter = clickCounter + 1" is performed and the value of clickCounter is incremented by 1.

Q 8.     How to display the iteration number when using ng-repeat directive in AngularJS?

Ans 8. Use $index to get the iteration number when using ng-repeat directive in AngularJS.

Example –

<table>

<tr ng-repeat="room in HotelRooms">

                    <td>{{$index + 1}}</td>
                    <td>{{room.Room}}</td>
                    <td>{{room.Hotel}}</td>

</tr>

</table>

Output –

Q 9.     How to create nested table in AngularJS?

Ans 9. We can create nested table in angularJS by using ng-repeat directive multiple times.

Example –

I have an array(defined array with the help of $scope service inside controller) which holds three string arrays –

$scope.Countries = [["india", "Delhi"], ["USA","Washington DC"], ["UK", "London"]];

The values of inner array will be displayed inside inner table -

<table>

<tr ng-repeat="country in Countries">

<td>

<table>

<tr ng-repeat="countryCapital in country">

<td>

{{countryCapital}}

</td>

</tr>

</table>

</td>

</tr>

</table>

Output –

Click here to watch more informative JQuery Tutorial videos!