Loop Loop in Angularjs Cat Types

Asked

Viewed 410 times

0

How to create a dynamic form at the angular, this form is composed of categories and types. It was supposed to create a tab with the various categories and within each category show the types.

Below follows the example of the code.

<div class="row">
    <div class="col-xs-12">
        <div class="box box-primary">
            <div class="box-body" id="teste" ng-app="app" ng-init="chargeData()" ng-controller="FormCtrl">
                <ul class="nav nav-tabs" role="tablist">
                    <li ng-repeat="category in categories"><a href="#{{category.ClinicalExamCategoryId}}" data-toggle="tab">{{category.clinicalExamCategoryName}}</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" ng-repeat="category2 in categories2" id="{{category2.ClinicalExamCategoryId}}">
                        <br>
                        <div id="{{category2.ClinicalExamCategoryId}}" class="row" ng-init="chargeType(category2.ClinicalExamCategoryId);">
                            <div ng-repeat="type in types " id="{{category2.ClinicalExamCategoryId}}" class="col-xs-6">
                                <div id="{{type.ClinicalExamTypeId}}" class="box box-primary">
                                    <div class="box-header">
                                        <h3 class="box-title" id="{{type.clinicalExamTypeName}}">{{type.clinicalExamTypeName}}</h3>
                                        <div class="box-body">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Controler:

$scope.chargeData = function () {
             $http.get("/ClinicalExams/SelectCategory").success(function (data, status, headers, config) {
                 $scope.categories = data;
                 $scope.categories2 = data;
             //    chargeType(id);
             }).error(function (data, status, headers, config) {
                 $scope.state = "ERRO DE EXECUÇÃO";
             });
         }
         $scope.chargeType = function (id) {
             $http.get("/ClinicalExams/SelectType/"+id).success(function (data, status, headers, config) {
                 $scope.types = data;
             }).error(function (data, status, headers, config) {
                 $scope.state = "ERRO DE EXECUÇÃO";
             });
         }
angularjs

  • All Categories

  • How do these categories return? JSON? You missed explaining what’s wrong with your code, what’s the problem.

  • he sends via json categories. But in each category he should make a call to fetch the types corresponding to that category

2 answers

1


ng-repeat="type in types";

you should use:

ng-repeat="type in types track by type.id";

or even:

ng-repeat="type in types track by $index";

But since you use repeat inside repeat; do the tests, I think you should use the first option, (track by type.id);

0

Dude, honestly, I would modify my service and already bring JSON all assembled the way it is its menu, with categories and subcategories in a list within each category...

The way you do, depending on the size of your menu, you will make 300 requests to the server.

Why don’t you bring already formatted like this

{
    categoria: 'categoria1'
    subCategoria: [{
            desricao: 'subCategoria1'
        }]
}

That way you don’t need to call the service for each existing category, breaking your repeat inside repeat would be N times easier.

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.