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

on

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 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>
<!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 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>
<!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 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>
<!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 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>
<!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>

Comments

Post a Comment