Ng-Src-2

 

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}}
 
 
 
<!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