[Solved] AngularJS ng-repeat not displaying JSON data in ASP.Net MVC

Last Reply one year ago By dharmendr

Posted one year ago


I am going to implment nested grid view

currently probelm in my code is that

it was displaying only sub grid view

in main grid view values are not displaying

at the time of fecthing all values are coming

but here it was displaying only sub grid view values

could you please help me

    Layout = null;
<html xmlns="http://www.w3.org/1999/xhtml">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination']);
        app.filter("dateFilter", function () {
            return function (item) {
                if (item != null) {
                    return new Date(parseInt(item.substr(6)));
                return "";
        app.controller('MyController', function ($scope, $http, MyService) {
            //To Get All Employee Records  
            function GetAllEmployees() {
                var getData = MyService.getemployee();
                getData.then(function (emp) {
                    $scope.Customers = emp.data;
                }, function (emp) {
                    alert("Records gathering failed!");

        app.service("MyService", function ($http) {
            //get All Employees
            this.getemployee = function () {
                return $http.get("/nestedgridview/GeCustomerOrders");
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-responsive">
                <tr class="success">
            <tbody dir-paginate="customer in Customers|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                <tr ng-class-even="'even'" ng-class-odd="'odd'">
                        <button type="button" ng-click="expanded = !expanded" class="btn btn-default">
                            <span ng-bind="expanded ? '-' : '+'"></span>
                    <td>{{customer.CustomerID }}</td>
                    <td>{{customer.ContactName }}</td>
                <tr class="sub" ng-show="expanded">
                    <td colspan="5">
                        <table class="table table-responsive">
                            <tr class="info">
                                <th>Ship Name</th>
                            <tr dir-paginate="order in customer.Orders|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
                                ng-class-even="'even'" ng-class-odd="'odd'">
                                    <input type="hidden" ng-model="order.OrderID" />
                                    {{order.OrderDate | dateFilter | date:"dd-MM-yyyy"}}


        public JsonResult GeCustomerOrders()
            List<CustomerModel> CO = new List<CustomerModel>();
                var cust = db.Customers.OrderBy(a => a.ContactName).ToList();
                foreach (var i in cust)
                    var orders = db.Orders.Where(a => a.CustomerID.Equals(i.CustomerID)).OrderBy(a => a.OrderDate).ToList();
                    CO.Add(new CustomerModel
                        Customers = i,
                        Orders = orders
            return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet };


    public class CustomerModel
        public Customer Customers { get; set; }
        public List<Order> Orders { get; set; }


This question does not have replies that have been liked.