Image Display in AngularJs ng src directive Using in AngularJs Asp.Net

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 


<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 





Next -  Add the controller to div tag ng-repeat to bind the image from Location











0 comments:

Post a Comment