HOW BIND LIST USING ANGULARJS IN ASP.NET

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 608  View(s)
Ratings:
Rate this:
I want to bind list using angularjs in asp.net.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: how bind list using angularjs in asp.net

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AngularList.aspx.cs" Inherits="Forumasp.AngularList" %>
    <!DOCTYPE html>
    

    <html xmlns="http://www.w3.org/1999/xhtml" ng-app="UserApp">

    <head runat="server">

        <title></title>

        <script src="Scripts/jquery-2.1.4.js"></script>

        <script src="Scripts/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module('UserApp', []);

            app.controller("CntrUser", ['$scope', function ($scope) {

                $scope.items = [

                        { UserID: "PA011", UserName: "Pawan Shukla", Contact: 7798963210, EmailID: "pawan@yahoo.com" },

    { UserID: "SU210", UserName: "Suresh Kumar", Contact: 4589647896, EmailID: "suresh@yahoo.com" },

    { UserID: "MA320", UserName: "Manoj KUmar", Contact: 8578968785, EmailID: "manoj@yahoo.com" }

                ];

            }]); 

        </script>

    </head>

    <body>

        <div ng-controller="CntrUser">

            <table>

                <thead>

                    <tr style="background-color: #9E7C1F;color: #fff;">

                        <th>UserID</th>

                        <th>UserName</th>

                        <th>Contact</th>

                        <th>EmailID</th>

                    </tr>

                </thead>

                <tbody>

                    <tr ng-repeat="item in items" style="background-color: #D4CFCF; color: #CA0D0D;">

                        <td>

                            <b><span>{{item.UserID}}</span></b>

                        </td>

                        <td>

                            <b><span>{{item.UserName}}</span></b>

                        </td>

                        <td>

                            <b><span>{{item.Contact}}</span></b>

                        </td>

                        <td>

                            <b><span>{{item.EmailID}}</span></b>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </body>

    </html>

    b

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!