var app = angular.module('plunker', ['sizeify']);
app.controller('MainCtrl', function($scope) {
$scope.imageurls = [
'http://www.telegraph.co.uk/content/dam/news/2016/08/04/trump-large_trans++pVlberWd9EgFPZtcLiMQf72gjJAEYt0IRa6zE8dVOb4.jpg',
'https://www.linux.com/sites/lcom/files/styles/rendered_file/public/open-source-love.png',
'https://www.kernel.org/theme/images/logos/tux.png',
'http://pm.gc.ca/sites/pm/files/styles/news_item_subpage/public/media/articles/pm21040x5852.jpg'
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Sizeify on Angular</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
<script src="http://sizeify.b.sjc.io/js/sizeify.latest.js"></script>
<script src="app.js"></script>
</head>
<h1>ng-sizeify</h1>
<body ng-controller="MainCtrl">
<table>
<caption>source urls</caption>
<tbody>
<tr ng-repeat="src in imageurls">
<td><a href="{{src}}" target="a">{{src}}</a></td>
</tr>
</tbody>
</table>
<table>
<caption>sizeified urls</caption>
<tbody>
<tr ng-repeat="src in imageurls">
<td><a href="{{ src | sizeify: 'g250' }}" target="b">{{ src | sizeify: 'p43' }}</a></td>
</tr>
</tbody>
</table>
</body>
</html>
/* Put your css in here */
body {
background-color: rgba(0,100,200,.2);
}
table {
width: 100%;
font-size: 10px;
font-family: verdana;
word-wrap: break-word;
margin-bottom: 2em;
}
table caption {
text-align: left;
font-size: large;
}
table tbody tr:nth-child(odd) {
background-color: rgba(200,100,0,.2);
}