Question:Explain directives ng-if, ng-switch and ng-repeat? 

Answer ng-if – This directive can add / remove HTML elements from the DOM based on an expression. If the expression is true, it add HTML elements to DOM, otherwise HTML elements are removed from the DOM.
<div ng-controller="MyCtrl"> 
<div ng-if="data.isVisible">ng-if Visible</div> 
</div> 

<script> 
 var app = angular.module("app", []); 
 app.controller("MyCtrl", function ($scope) {
   $scope.data = {}; 
   $scope.data.isVisible = true; 
 }); 
</script>
ng-switch – This directive can add / remove HTML elements from the DOM conditionally based on scope expression.
<div ng-controller="MyCtrl"> 
  <div ng-switch on="data.case"> 
    <div ng-switch-when="1">Shown when case is 1</div> 
    <div ng-switch-when="2">Shown when case is 2</div> 
    <div ng-switch-default>Shown when case is anything else than 1 and 2</div> 
  </div> 
</div> 


<script> 
  var app = angular.module("app", []); 
  app.controller("MyCtrl", function ($scope) { 
    $scope.data = {}; 
    $scope.data.case = true; 
  }); 
</script>
ng-repeat - This directive is used to iterate over a collection of items and generate HTML from it.
<div ng-controller="MyCtrl"> 
  <ul> 
      <li ng-repeat="name in names"> {{ name }} </li>
 </ul> 
</div>


<script> 
  var app = angular.module("app", []);
  app.controller("MyCtrl", function ($scope) { 
     $scope.names = ['Shailendra', 'Deepak', 'Kamal']; 
  }); 
 </script>
 

+ Report

Mohammad Towhidul Islam

Editor, VCampus

Your Name

Your Email

Type of Report
Spelling MistakeIncorrect AnswerGrammar MistakeContent MissingImproper Text FormatInsufficient AnswerDuplicate QuestionImproper Sentence StructureImproper Equation/FormulaOther

Description