AngularJS ngSrcset directive Example
AngularJS provides ngSrcset attribute directive for handling multiple images based on condition.It is really helpful for handling responsive images.We can use this directive for showing different images based on screen width.In this demo,"We will use Gravatar images of different size for for different screen size".Below code shows the use of ngSrcset with a set of images and conditions. To see the ngSrcset in action try to resize your windlow.<!DOCTYPE html><html ng-app="myApp">
<head>
<script src="http://www.tutorialsavvy.com//ajax.go...
<meta charset="utf-8">
<title>AngularJS ngSrcset Example</title>
</head>
<body ng-controller="MyController">
<h3>ngSrcset directive Example</h3>
<img ng-srcset="{{myImageSize100}},{{myImageSize100}},{{myImageSize200}}"></img>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope", function($scope) {
$scope.myImageSize50 = "http://www.gravatar.com/avatar/c6e6c5... 100w";
$scope.myImageSize100 = "http://www.gravatar.com/avatar/c6e6c5... 300w";
$scope.myImageSize200 = "http://www.gravatar.com/avatar/c6e6c5... 700w";
}]);
</script>
</body>
</html>
The output of the above code is embedded in below JSBIN link.Just resize the window to check how ngSrcset changes the image URL and display different Gravatar image size.AngularJS ngSrcset Example
No comments have been added yet.
