Understanding ng-if, ng-switch and ng-repeat directives
PrintAngularJS provides you ng-if, ng-switch directives to display HTML elements based on conditions or cases. ng-repeat directive is used to generate HTML from a collection of items.
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>
What do you think?
I hope you will enjoy the ng-if, ng-switch and ng-repeat directives in AngularJS while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.