5 Example(s) of Ng-Src


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


Ng-Src Example - 1
<!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>

Output

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:

  • {{pic.Name}}


Ng-Src Example - 2
<!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>

Output

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.


Ng-Src Example - 3
<!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>

Output

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"; };


Ng-Src Example - 4
<!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>

Output

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"); };


Ng-Src Example - 5
<!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>

Output