Member 12523149 Ответов: 1

Mvc с angularjs - вложенным ретранслятором

we have to implement nested ng-repeat in asp.net mvc with angularjs below code we have used its not working.
we want grouping content category based product listing. please anyone help ASAP. Below code we have used

Expected output:
Category1
	Product1 catg1
	Product2 catg1

Category2
	Product1 catg2
	Product2 catg2



Что я уже пробовал:

index.cshtml file:

<div data-ng-repeat="catg in Categorys">
{{catg.ecom_category_title}}
<ul data-ng-repeat="prd in Products">
    <li>{{prd.ecom_product_title}}</li>
</ul>
</div>

category.js file:

$http.get('/api/Category/ListAllCategory', { params: {} }).success(function (data) {
    $scope.Categorys = data;
    for (var i = 0; i < $scope.Categorys.length; i++) {
        $scope.getCategoryID = $scope.Categorys[i].ecom_category_id;
        $http.get('/api/Product/ListAllProductByCategory', { params: { ecom_category_id: $scope.getCategoryID } }).success(function (response) {
            alert('dsfsdf');
            $scope.Products = response;
        })
       .error(function () {
           $scope.error = "Some Error.";
       });
    }

})
.error(function () {
    $scope.error = "Some Error.";
});

		    
                    

                    
                

                

                                    

            

            

                

                    
1 Ответов

                                            

                            
Рейтинг:
 0


                            

                                

                                    Karthik_Mahalingam
                                    
                                

                                

    Получение продуктов в цикле через $http.get запрос - это не очень хорошая идея, так как он работает на asynchronos reqest, результат, который вы получаете из цикла, не является допустимым для конкретной категории, так как перед выполнением первого ajax call цикл завершил бы итерацию.

Более того, это приведет к многочисленным запросам к серверу, что снизит производительность системы.

простой способ добиться группировки заключается в следующем присоединение к данным в сервер и верните как есть json к браузеру и передайте его в ng-repeat как 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
    <div ng-app="myApp" ng-controller="customersCtrl">   

        <div data-ng-repeat="catg in Categorys">
            {{catg.ecom_category_title}}
            <ul data-ng-repeat="prd in catg.Products">
                <li>{{prd.ecom_product_title}}</li>
            </ul>
        </div>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function ($scope, $http) {
           // get the data from server 
            var data = [{ ecom_category_title: 'cat1', Products: [{ ecom_product_title: 'cat1 prod 1' }, { ecom_product_title: 'cat1 prod 2' }] },
            { ecom_category_title: 'cat2', Products: [{ ecom_product_title: 'cat2 prod 1' }, { ecom_product_title: 'cat2 prod 2' }] },
            { ecom_category_title: 'cat3', Products: [{ ecom_product_title: 'cat3 prod 1' }, { ecom_product_title: 'cat3 prod 2' }] }]
            $scope.Categorys = data;
        });
    </script>

</body>
</html>




Демонстрация: Плунжер[^]

Код контроллера для соединения данных
string[] categoryNames = { "aa", "bb" };
          List<Category> lst = new List<Category>();
          foreach (string cat in categoryNames)
              lst.Add(new Category() { CategoryName = cat, Products = GetProducts(cat) });
          return JSON(lst);




private static Product[] GetProducts(string cat)
     {
        // your code to get the list of products
         return null;
     }




                                

                            

                                                            

                                    

                                        Member 12523149
                                        
                                    

                                    
Спасибо за быстрый повтор


ваш ссылочный код статическая загрузка контента, но мы должны реализовать динамический контент из ссылки webapi link link ('/api/Category/ListAllCategory' на основе '/api/Product/ListAllProductByCategory'), связанной с категорией. мы должны получить данные из базы данных с помощью webapi. Пожалуйста, объясните, как это сделать.


                                

                                                            

                                    

                                        Karthik_Mahalingam
                                        
                                    

                                    
статика - это только для примера

получить данные из /api/Category/ListAllCategory сохранить их в списке

повторите список

получить данные из /api/Product/ListAllProductByCategory сохранить их в списке

присоединяйтесь к списку, как указано в приведенном выше коде, преобразуйте его в json и передайте в angular.


                                

                                                            

                                    

                                        Member 12523149
                                        
                                    

                                    
Спасибо

Не могли бы вы, пожалуйста, как перебрать две ссылки.Это что-то новенькое для меня. Пожалуйста объяснить