Part 4 - How to Retrieve and Display tabular data with AngularJS and ASP.NET MVC application

In this post, I would like to explain Part 4 - How to Retrieve and Display tabular data with AngularJS and ASP.NET MVC application.

This is our 4th Post about AngularJS. 

Here I have explained a little about AngularJS and What we will learn in this section part by part. In Part2 of this post we have seen how Display model as single data, but the question is how do we display model that is an array? In this part (Part 4) I am going to explain how to Retrieve and Display tabular data (List of Data / Array of data) with AngularJS and ASP.NET MVC application.

Here we will use AngularJS ng-repeat directive, which is repeats an HTML element. This directive is one of the most commonly used and serves to define your template scope when looping through collections.
Part4 - Retrieve and Displa tabular data
Employee ID Employee Name Hire Date Address City Postal Code
{{e.EmployeeID}} {{e.FirstName}} {{e.LastName}} {{e.HireDate.slice(6, -2) | date: 'dd-MM-yyyy'}} {{e.Address}} {{e.City}} {{e.PostalCode}}
Part 4 - How to Retrieve and Display tabular data with AngularJS and ASP.NET MVC application
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <style>
        .menuUl {
            list-style:none;
            margin:0px;
            padding:0px;
        }
            .menuUl li {
                float:left;
                padding:3px;
                margin-right:2px;
                background-color:#f3f3f3;
            }
                .menuUl li a {
                    display:block;
                    line-height:30px;
                    padding:0px 5px;
                    color:#920f0f;
                    text-decoration:none;
                }
                    .menuUl li a:hover {
                        text-decoration:underline;
                    }
    </style>
</head>
    @* Here  ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner 
    of AngularJS application*@


<body ng-app="MyApp">
     <ul class="menuUl">
         <li><a href="#" style="color:black;"><b>Angular Example :</b></a></li>
         <li>@Html.ActionLink("Part 1", "Index")</li>
         <li>@Html.ActionLink("Part 2", "Part2")</li>
         <li>@Html.ActionLink("Part 3", "Part3")</li>
         <li>@Html.ActionLink("Part 4", "Part4")</li>
     </ul>
    <div style="height:1px; clear:both;"></div>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @* Add Angular Library Here *@
    @Scripts.Render("~/bundles/angular")
    <script src="~/Scripts/MyApp.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>


Posted By :