 |
| ng-if, ng-switch and ng-repeat |
AngularJS 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-repeat="message in data.messages" ng-class="message.type">
<hr>
<div ng-if="showFrom(message)">
<div>From: {{message.from.name}}</div>
</div>
<div ng-if="showCreatedBy(message)">
<div>Created by: {{message.createdBy.name}}</div>
</div>
var myApp = angular.module('myApp', []);
myApp.directive('ngIf', function() {
return {
link: function(scope, element, attrs) {
if(scope.$eval(attrs.ngIf)) {
// remove '<div ng-if...></div>'
element.replaceWith(element.children())
} else {
element.replaceWith(' ')
}
}
}
});
function MyCtrl($scope) {
$scope.data = {}
$scope.showFrom = function(message) {
return message.hasOwnProperty('from')
}
$scope.showCreatedBy= function(message) {
return message.hasOwnProperty('createdBy')
}
$scope.showTo= function(message) {
return message.hasOwnProperty('to')
}
$scope.data.messages = [
{
"type": "phone",
"date": "25/12/2012",
"time": "11.34",
"createdBy": {
"name": "Jenny Forster1",
"avatarFileName": "jenny-forster.jpg"
},
"from": {
"name": "Jenny Forster1",
"avatarFileName": "jenny-forster.jpg"
},
"to": {
"name": "Daniel Craig1",
"avatarFileName": "daniel-craig.jpg"
},
"title": "This is the title of a phone call"},
{
"type": "email",
"date": "25/12/2012",
"time": "11.34",
"createdBy": {
"name": "Jenny Forster2",
"avatarFileName": "jenny-forster.jpg"
},
"from": {
"name": "Daniel Craig2",
"avatarFileName": "daniel-craig.jpg"
},
"to": {
"name": "Jenny Forster2",
"avatarFileName": "jenny-forster.jpg"
},
"title": "This is the title of an email"},
{
"type": "meeting",
"date": "25/12/2012",
"time": "11.34",
"createdBy": {
"name": "Jenny Forster3",
"avatarFileName": "jenny-forster.jpg"
},
"title": "This is the title of a meeting"},
{
"type": "note",
"date": "25/12/2012",
"time": "11.34",
"createdBy": {
"name": "Jenny Forster4",
"avatarFileName": "jenny-forster.jpg"
},
"title": "This is the title of a note"}
]
}
This directive can add / remove HTML elements from the DOM conditionally based on scope expression.
<div ng-app ng-controller="ctrl" >
<select ng-model="status" ng-options="status for status in statusList"></select>
<p ng-switch on="(status == 'wrong') || (status == 'incorrect')">
<span ng-switch-when="true">
Wrong
</span>
<span ng-switch-default>
function ctrl($scope){
$scope.statusList=["incorrect","wrong","stuff"];
}
ng-repeat
The ng-repeat directive used on an array of objects
This directive is used to iterate over a collection of items and generate HTML from it.
Example Code:
<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>
Note: ng-repeate is Json or API Data used is Looping Function.