Image Display in AngularJs ng src directive
AngularJs ng src directive call the specific directive location mention from server or local folder . here how to use and call the directive in AngularJs.
DEMO
HTML
Next - Add the controller to div tag ng-repeat to bind the image from Location
AngularJs ng src directive call the specific directive location mention from server or local folder . here how to use and call the directive in AngularJs.
DEMO
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var MyApp = angular.module("dotModule", []);
MyApp.controller("dotController",function ($scope){
var Drizzles = [
{name: "AngularJs in Masterpage", link: "https://dotnetdrizzles.blogspot.in/2016/04/anjularjs-using-in-masterpage-aspnet.html", demo: "/Master.gif"},
{name: "AngularJs Date Function", link: "https://dotnetdrizzles.blogspot.in/2016/05/angularjs-date-function-format-date-and.html", demo: "/Date.png"},
{name: "AngularJs ng-show,hide Directive.", link: "https://dotnetdrizzles.blogspot.in/2016/05/angulrjs-ng-show-and-ng-hideng-init.html", demo: "/ng-show.gif"}
];
$scope.Drizzles =Drizzles;
});
</script>
</head>
<body ng-app="dotModule">
<form id="form1" runat="server">
<div ng-controller="dotController">
<table>
<thead>
<tr>
<th>Name</th>
<th>Link</th>
<th>DEMO</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Drizz in
Drizzles">
<td><img id="im" src="{{Drizz.demo}}" height="150" width="250" />
<td style="color:blue;font-family:Verdana">{{Drizz.name}}</td>
<td style="color:red;font-family:Verdana">{{Drizz.link}}</td>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
Add new form - Add Angularjs script - Add the controller with the image directive
0 comments:
Post a Comment