top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

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

0 votes
431 views
Explain directives ng-if, ng-switch and ng-repeat?
posted Oct 16, 2017 by Sathaybama

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

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>
answer Oct 16, 2017 by Shivaranjini
...