In
this article I am going to explain how to show image using ng-src directive of
AngularJs.
In
the previous article I have explained How to filter data using AngularJs, AngularJsTutorial: Implement Sorting and Searching of data and AngularJs Tutorial: Sortorder by table header.
Description:
We
use the ng-src directive to display image.
Implementation:
I
have created an example. See the below given source code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AngularJs Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<style>
table tr td
{
padding:
5px 30px 0 0;
}
a
{
color:
#E91E63;
font-weight:bold;
text-decoration:none;
}
</style>
<script>
var bookApp
= angular.module("testapp", []);
bookApp.controller('testController',
function ($scope) {
$scope.userList = [
{ "Name":
"John", "Email":
"John@gmail.com", "src": "images/image.jpg"
},
{ "Name":
"Vinod", "Email":
"Vinod@yahoo.com", "src": "images/img1.jpg"},
{ "Name":
"Steve", "Email":
"Steve@hotmail.com", "src": "images/img2.jpg"
},
{ "Name":
"Dan", "Email":
"Dan@rock.com", "src": "images/img2.jpg"
},
{ "Name":
"Jonshan", "Email":
"Jonshan@gmail.com", "src": "images/img3.jpg"},
{ "Name":
"Rocky", "Email":
"Rocky@rocks.com", "src": "images/pic.jpg"
},
{ "Name":
"Santhom", "Email":
"Santhom@yahoo.com", "src": "images/image.jpg"
}
];
});
</script>
</head>
<body>
<form id="form1" runat="server">
<fieldset style="width:40%">
<legend>AngularJs
Tutorial</legend>
<div ng-app="testapp" ng-controller="testController">
<table>
<tr>
<td>Search :</td>
<td colspan="3"><input
type="text"
placeholder="Search"
ng-model="name"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
<table>
<tr>
<td>S.No.</td>
<td><a href="" ng-click="sortType='Name';reverse=!reverse">Name</a></td>
<td><a href="" ng-click="sortType='Email';reverse=!reverse">Email</a></td>
<td></td>
</tr>
<tr ng-repeat="users in
userList|orderBy:sortType:reverse|filter:name">
<td>{{$index+1}}</td>
<td>{{users.Name}}</td>
<td>{{users.Email}}</td>
<td><img ng-src="{{users.src}}" alt="" title="{{emp.Name}}" width="150" height="150" /></td>
</tr>
</table>
</div>
</fieldset>
</form>
</body>
</html>
RESULT:
0 Comments