Ng-Src-3

 

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