Description :
Ng-Src is similar to src attribute of image tag. In this example of ng-src, we have a scope variable name "pic" and we are assigning its value to $scope.pic = "http://learnit.visrosoftware.com/datafiles/birds_009_big-400x400.jpg"; and binding it to image like
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="Example">
<div class="container well" ng-controller="ExampleController">
<img ng-src="{{pic}}" />
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.pic = "http://learnit.visrosoftware.com/datafiles/birds_009_big-400x400.jpg";
}]);
</script>
</body>
</html>
Description :
In this example of Ng-Src, We have an array of "pics" which contain Url and name and we are looping thro' the array using ng-repeat. Scope variable : $scope.pics = [{ url: "http://learnit.visrosoftware.com/datafiles/imglist-2.jpg", Name: "John Mark" }, { url: "http://learnit.visrosoftware.com/datafiles/imglist-2.png", Name: "Stephen Gill" }]; And html code like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container">
<h3 class="text-primary">Images in list using ng-src</h3>
<ul ng-repeat="pic in pics">
<li><img ng-src="{{pic.url}}" style="height:200px;width:250px" /><span style="font-size:xx-large">{{pic.Name}}</span></li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.pics = [{ url: "http://learnit.visrosoftware.com/datafiles/imglist-2.jpg", Name: "John Mark" }, { url: "http://learnit.visrosoftware.com/datafiles/imglist-2.png", Name: "Stephen Gill" }];
}]);
</script>
</body>
</html>
Description :
In this example of Ng-Src, We have an array of countries with country name, its capital, currency and their flag. So we are looping through entire array and binding in a grid using table,tr,td and flag asSee the example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container well">
<h3 class="text-primary">Images in table using ng-src</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Capital</th>
<th>Currency</th>
<th>Flag</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="country in countries">
<td>{{country.Name}}</td>
<td>{{country.Capital}}</td>
<td>{{country.Currency}}</td>
<td><img ng-src="{{country.Flag}}" width="50" height="30" /></td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.countries = [{ Name: "India", Capital: "New Delhi", Currency: "Indian rupee", Flag: "http://learnit.visrosoftware.com/datafiles/India.png" },
{ Name: "Afghanistan", Capital: "Kabul", Currency: "Afghani", Flag: "http://learnit.visrosoftware.com/datafiles/Afghanistan.png" },
{ Name: "Nepal", Capital: "Kathmandu", Currency: "Nepalese rupee", Flag: "http://learnit.visrosoftware.com/datafiles/Nepal.png" },
{ Name: "Pakistan", Capital: "Islamabad", Currency: "Pakistani Rupee", Flag: "http://learnit.visrosoftware.com/datafiles/Pakistan.png" },
{ Name: "Japan", Capital: "Tokyo", Currency: "Yen", Flag: "http://learnit.visrosoftware.com/datafiles/Japan.png" },
{ Name: "France", Capital: "Paris", Currency: "Euro CFP franc", Flag: "http://learnit.visrosoftware.com/datafiles/France.png" },
{ Name: "Italy", Capital: "Rome", Currency: "Euro", Flag: "http://learnit.visrosoftware.com/datafiles/Italy.png" }];
}]);
</script>
</body>
</html>
Description :
In this example of <code>Ng-Src</code>, We are passing a function to <code>ng-src</code> like:And function definition is like: <code>$scope.getImageUrl</code> = function () { return "http://learnit.visrosoftware.com/datafiles/src-function.jpg"; };
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container well text-center">
<h2 class="text-primary">Calling function on ng-src</h2>
<img ng-src="{{getImageUrl()}}" height="300" />
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.getImageUrl = function () {
return "http://learnit.visrosoftware.com/datafiles/src-function.jpg";
};
}]);
</script>
</body>
</html>
Description :
In this example of Ng-Src, We have provided a button that will change the picture randomly. Here is the function to get the image src: $scope.changeImage = function (index) { $scope.picIndex == 3 ? $scope.picIndex = 1 : $scope.picIndex += 1; $scope.picUrl = index == 1 ? "http://learnit.visrosoftware.com/datafiles/Nature-2.jpg" : (index == 2 ? "http://learnit.visrosoftware.com/datafiles/Nature-3.jpg" : "http://learnit.visrosoftware.com/datafiles/Nature-1.jpg"); };
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container well text-center">
<h2 class="text-primary">Change ng-src on button click</h2>
<img ng-src="{{picUrl}}" height="300" width="500" /><br /><br />
<button class="btn btn-primary btn-xs" ng-click="changeImage(picIndex)">Change Picture</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.picIndex = 1;
$scope.picUrl = "http://learnit.visrosoftware.com/datafiles/Nature-1.jpg";
$scope.changeImage = function (index) {
$scope.picIndex == 3 ? $scope.picIndex = 1 : $scope.picIndex += 1;
$scope.picUrl = index == 1 ? "http://learnit.visrosoftware.com/datafiles/Nature-2.jpg" : (index == 2 ? "http://learnit.visrosoftware.com/datafiles/Nature-3.jpg" : "http://learnit.visrosoftware.com/datafiles/Nature-1.jpg");
};
}]);
</script>
</body>
</html>