CODEWITHSUNDEEP
javascriptangularjs
codeman
codeman

Reputation: 47

angular nested ng-repeat failure

it's me again :) I am still at the very beginning with angularJS and I have just encountered a problematic issue. I've got an array with some data that I want to be rendered on the page that's why I use ng-repeat but I also need to include another ng-repeat in the previous one. I have the general ng-repeat="dialog in dialogWindows" and lower in the DOM ng-repeat="input in dialog.inputs", but the second ngRepeat dousnt work and it reports no errors in the coonsole. can You help me please?

Here is the JS:

 var antroApp = angular.module('antroApp', []);

    function dialogWindows($scope){

    $scope.dialogWindows = [
    {id:0, 
    idName:"pigmentation", 
    number:"1", 
    name:"Pigmentation",
    answer1:"Clear complexion",
    answer2:"Semi-swarthy complexion",
    answer3:"Swarthy complexion",
    answer4:"",
    answer5:"",
    answer6:"",
    inputs:[{id:0,a:"a1",answer:"a"},
            {id:1,a:"a2", answer:"b"}],
    }



    ];

    }
    antroApp.controller('antroApp', antroApp);

and here is my HTML:

<div ng-controller="dialogWindows">
            <div ng-repeat="dialog in dialogWindows">
            <div id="{{dialog.idName}}" class="bold abs">   
                <div class="questionContainer rel">
                    <div class="menu abs">
                        <ul class="menuList">
                            <a href=""><li id="menuStart" class=" unbold">Start</li></a>
                            <a href=""><li id="menuAbout" class=" unbold">About</li></a>
                            <a href=""><li id="menuTech" class=" unbold">Technology</li></a>
                            <a href=""><li id="menuContact" class=" unbold">Contact</li></a>
                        </ul>
                    </div>
                    <div class="questionHeader"><div class="textGradient unbold tgHeaderXY">{{dialog.number}}.{{dialog.name}}</div></div>
                    <div class="empty">&nbsp;</div>
                    <div class="questionBody">

                    <div ng-repat="input in dialog.inputs">
                    <input type="radio" id="radio1" name="sex" value="male">
                    <label for="radio1" class="answer abs {{input.a}}">{{input.answer}}</label>


                    </div>
                    </div>
                    <a href="#hairColor" class="nextButton unbold">Next <i class="icon-arrow-right icon-white"></i></a>

            <i class="icon-pencil tgHeaderIcon icon-3x abs"></i>
            </div><!--/pigmentation-->
            </div><!--/ng-repeat-->
            </div><!--/ng-controller-->

Any help will be appreciated.Thanks

Upvotes: 1

Views: 3315

Answers (3)

Max
Max

Reputation: 1150

Missing closing div, typo as per Nenad answer, same naming for App and Controller, same naming for controller and scope variable... ouch my mind hurts, anyways, here is the result at jsbin

EDIT: (as per minitech request) this an alternative version, example in jsbin has unnecessary code in question removed 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</head>
    <body ng-app="myApp"> <!-- *myApp is antroApp app -->
        <div ng-controller="myCtrl"> <!-- *myCtrl is dialogWindows ctrl  -->
            <div ng-repeat="dialog in data"> <!-- data is dialogWindows scope var -->
                <div class="bold abs">
                    <div class="questionContainer rel">
                        <div class="menu abs">
                            <ul class="menuList"> 
                                <a href=""><li id="menuStart" class=" unbold">Start</li></a>
                                <a href=""><li id="menuAbout" class=" unbold">About</li></a>
                                <a href=""><li id="menuTech" class=" unbold">Technology</li></a>
                                <a href=""><li id="menuContact" class=" unbold">Contact</li></a>
                            </ul>
                        </div>
                        <div class="questionHeader">
                            <div class="textGradient unbold tgHeaderXY">{{dialog.number}}.{{dialog.name}}</div>
                        </div>
                        <div class="empty">&nbsp;</div>
                        <div class="questionBody">
                            <div ng-repeat="input in dialog.inputs">
                                <input type="radio" id="radio1" name="sex" value="male" />
                                <label for="radio1" class="answer abs {{input.a}}">{{input.answer}}</label>
                            </div>
                        </div> <a href="#hairColor" class="nextButton unbold">Next <i class="icon-arrow-right icon-white"></i></a>
                        <i class="icon-pencil tgHeaderIcon icon-3x abs"></i>

                    </div><!--/questionContainer--> <!-- *missing div -->
                </div><!--/pigmentation-->
            </div><!--/ng-repeat-->
        </div><!--/ng-controller-->
        <script>
            var App = angular.module('myApp', []); //*myApp is in use now
            App.controller('myCtrl', ['$scope', //*myCtrl is in use now 
                function ($scope) {

                    $scope.data = [{
                        id: 0,
                        idName: "pigmentation",
                        number: "1",
                        name: "Pigmentation",
                        answer1: "Clear complexion",
                        answer2: "Semi-swarthy complexion",
                        answer3: "Swarthy complexion",
                        answer4: "",
                        answer5: "",
                        answer6: "",
                        inputs: [{
                                id: 0,
                                a: "a1",
                                answer: "a"
                            }, {
                                id: 1,
                                a: "a2",
                                answer: "b"
                            }]
                    }];

                }]);
        </script>

    </body>
</html>

Upvotes: 1

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

Just single mistake;

set <div ng-repeat="input in dialog.inputs">

instead <div ng-repat="input in dialog.inputs">

As a side note:

use <pre>{{input|json}}</pre> as basic debugger to detect the issue

see Fiddle

Upvotes: 2

Nenad
Nenad

Reputation: 26617

In your nested loop you have to use ng-repeat, instead of ng-repat. If you would strip off example markup from unnecessary garbage before posting question, you would probably find typo yourself.

Then, you're missing ng-app="antroApp" directive in example.

Then, controller is dialogWindows, not antroApp:

antroApp.controller('dialogWindows', dialogWindows);

Upvotes: 1

Related Questions