Home > DeveloperSection > Forums > how bind list using angularjs in asp.net
Ankit Singh

Total Post:341

Points:2389
Posted on    November-16-2015 11:15 PM

 .NET ASP.Net  Angular JS 
Ratings:


 1 Reply(s)
 284  View(s)
Rate this:
I want to bind list using angularjs in asp.net.


aditya kumar Patel

Total Post:244

Points:1736
Posted on    November-16-2015 11:26 PM

<%@ 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

Don't want to miss updates? Please click the below button!

Follow MindStick