Understanding ng-if,ng-switch,ng-show and ng-repeat directives

by Virender
August 13, 2015

Understanding ng-if,ng-switch,ng-show, ng-hide and ng-repeat directives

AngularJs provide a different directive to display elements in HTML document based on different conditions we can use directives like ng-if, ng-switch , ng-show and ng-repeat directive. 

ng-if

ng-if directive remove DOM element if expression return false. And if expression return true then it recreates a DOM tree again.

ng-if create new scope every time when it call.

ng-if example

plnkr – http://plnkr.co/edit/qeTK1o8dprdJZDeBRuLl?p=preview

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Understanding ng-if</title>
   <script>
      //ng-if example
      var myApp = angular.module('myApp', []);
      myApp.controller("ngifTestController", function($scope) {
         $scope.fruitsAvaliable = true;
         $scope.milkAvaliable = true;
         $scope.vegetablesAvaliable = false;
         $scope.showVegetablesAvaliable = function() {
            $scope.vegetablesAvaliable = $scope.vegetablesAvaliable == false ? true : false;
         };
      });
   </script>
</head>
<body ng-app="myApp">
   <div ng-controller="ngifTestController"> <strong> We have following products in stock.</strong>
      <br />
      <br />
      <div ng-if="fruitsAvaliable"> Fruit </div>
      <div ng-if="milkAvaliable">Milk</div>
      <div ng-if="vegetablesAvaliable"> Vegetables</div>
      <br />
      <br />
      <button ng-click="showVegetablesAvaliable()">Show Vegetables Avaliable</button>
   </div>
</body>
</html>
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Understanding ng-if</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
//ng-if example
var myApp = angular.module('myApp', []);
myApp.controller("ngifTestController", function($scope) {
$scope.fruitsAvaliable = true;
$scope.milkAvaliable = true;
$scope.vegetablesAvaliable = false;
$scope.showVegetablesAvaliable = function() {
$scope.vegetablesAvaliable = $scope.vegetablesAvaliable == false ? true : false;
};
});
</script>
</head>

<body ng-app="myApp">
<div ng-controller="ngifTestController"> <strong> We have following products in stock.</strong>
<br />
<br />
<div ng-if="fruitsAvaliable"> Fruit </div>
<div ng-if="milkAvaliable">Milk</div>
<div ng-if="vegetablesAvaliable"> Vegetables</div>
<br />
<br />
<button ng-click="showVegetablesAvaliable()">Show Vegetables Avaliable</button>
</div>
</body>

</html>

ng-switch

ng-switch also work similar to ng-if directive its also create a elements into DOM but based on  condition .

for example –  ng-switch show the element where expression return true. If no condition match it will show you default condition.

ng-switch example

plnkr – http://plnkr.co/edit/PVxXOpRAXC102wMLMoYQ?p=preview

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Understanding ng-switch</title>
   <script>
      var myApp = angular.module('myApp', []);
      myApp.controller("ngswitchTestController", function($scope) {
         $scope.avaliableQuantity = 1;
         $scope.showExtraLargeAvaliable = function() {
            $scope.avaliableQuantity = 3;
         };
      });
   </script>
</head>
<body ng-app="myApp">
   <div ng-controller="ngswitchTestController"> <strong> We have following map size avaliable in stock.</strong>
      <br />
      <br />
      <div ng-switch on="avaliableQuantity">
         <div ng-switch-when="1">Small</div>
         <div ng-switch-when="2">Large</div>
         <div ng-switch-default>Extra Large</div>
      </div>
      <br />
      <br />
      <button ng-click="showExtraLargeAvaliable()">Show Vegitables Avaliable</button>
   </div>
</body>
</html>
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Understanding ng-switch</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("ngswitchTestController", function($scope) {
$scope.avaliableQuantity = 1;
$scope.showExtraLargeAvaliable = function() {
$scope.avaliableQuantity = 3;
};
});
</script>
</head>

<body ng-app="myApp">
<div ng-controller="ngswitchTestController"> <strong> We have following map size avaliable in stock.</strong>
<br />
<br />
<div ng-switch on="avaliableQuantity">
<div ng-switch-when="1">Small</div>
<div ng-switch-when="2">Large</div>
<div ng-switch-default>Extra Large</div>
</div>
<br />
<br />
<button ng-click="showExtraLargeAvaliable()">Show Vegitables Avaliable</button>
</div>
</body>

</html>

ng-show

ng-show use to show and hide elements from DOM but without manipulation in DOM. The main difference between ng-if and ng-show is ng-show add “class=’ng-hide'” attribute into element if expression return false and remove “class=”ng-hide” attribute from element when expression return true . ng-show not manipulate DOM. ng-show work on CSS display property.

display: none !important;

ng-show example

plnkr – http://plnkr.co/edit/laSiMUO3D1bl7plmLW9E?p=preview

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Understanding ng-show</title>
   <script>
      var myApp = angular.module('myApp', []);
      myApp.controller("ngshowTestController", function($scope) {
         $scope.fruitsAvaliable = true;
         $scope.milkAvaliable = true;
         $scope.vegetablesAvaliable = false;
         $scope.showVegetablesAvaliable = function() {
            $scope.vegetablesAvaliable = $scope.vegetablesAvaliable == false ? true : false;
         };
      });
   </script>
</head>
<body ng-app="myApp">
   <div ng-controller="ngshowTestController"> <strong> We have following products in stock.</strong>
      <br />
      <br />
      <div ng-show="fruitsAvaliable"> Fruit
         <br /> </div>
      <div ng-show="milkAvaliable">Milk</div>
      <div ng-show="vegetablesAvaliable"> Vegitables</div>
      <br />
      <br />
      <button ng-click="showVegetablesAvaliable()">Show Vegetables Avaliable</button>
   </div>
</body>
</html>
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Understanding ng-show</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("ngshowTestController", function($scope) {
$scope.fruitsAvaliable = true;
$scope.milkAvaliable = true;
$scope.vegetablesAvaliable = false;
$scope.showVegetablesAvaliable = function() {
$scope.vegetablesAvaliable = $scope.vegetablesAvaliable == false ? true : false;
};
});
</script>
</head>

<body ng-app="myApp">
<div ng-controller="ngshowTestController"> <strong> We have following products in stock.</strong>
<br />
<br />
<div ng-show="fruitsAvaliable"> Fruit
<br /> </div>
<div ng-show="milkAvaliable">Milk</div>
<div ng-show="vegetablesAvaliable"> Vegitables</div>
<br />
<br />
<button ng-click="showVegetablesAvaliable()">Show Vegetables Avaliable</button>
</div>
</body>

</html>

ng-repeat

ng-repeat directive work on collection , ng-repeat iterate over collection and generate HTML from it.

If you are using example like

<li ng-repeat=”item in collections”> .. </li>

AngularJS create a new scope for every LI instance that it generated. And put the “item” cursor reference inside that per-item

ng-repeat example

plnkr –http://plnkr.co/edit/RVmjNYPUBLXdt0e1LM7c?p=preview

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Understanding ng-repeat</title>
   <script>
      var myApp = angular.module('myApp', []);
      myApp.controller("ngrepeatTestController", function($scope) {
         $scope.fruits = ["Mango", "Apple", "Orange", "Kiwifruit", "Grape", "Cranberry", "Blueberry"];
      });
   </script>
</head>
<body ng-app="myApp">
   <div ng-controller="ngrepeatTestController"> <strong> We have following fruits in stock.</strong>
      <br />
      <br />
      <ul ng-repeat="fruit in fruits">
         <li> {{fruit}} </li>
      </ul>
   </div>
</body>
</html>
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Understanding ng-repeat</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("ngrepeatTestController", function($scope) {
$scope.fruits = ["Mango", "Apple", "Orange", "Kiwifruit", "Grape", "Cranberry", "Blueberry"];
});
</script>
</head>

<body ng-app="myApp">
<div ng-controller="ngrepeatTestController"> <strong> We have following fruits in stock.</strong>
<br />
<br />
<ul ng-repeat="fruit in fruits">
<li> {{fruit}} </li>
</ul>
</div>
</body>

</html>
Share:

Tags:

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related posts