1

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

codeman
  • 47
  • 1
  • 3
  • 9

3 Answers3

2

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

Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
  • Thanks for helping me out. Yes the problem was the naming of ng-repeat. I was working until 4:00AM then I went to sleep and woke up at 9:00AM and back to work that's why I simply overlooked it. – codeman Oct 06 '13 at 09:47
  • interesting that it didn't drop compilation erorr – Maxim Shoustin Oct 06 '13 at 09:53
1

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);
Nenad
  • 24,809
  • 11
  • 75
  • 93
  • If your answer was: "In your nested loop you have to use ng-repeat, instead of ng-repat. Then, controller is dialogWindows, not antroApp" I would've give you approval but 50% of it was actually accusing me of not knowing the answer though it is the place for the people how are allowed to not know and to ask for help from the people who are more experienced. You failed the test on the puropse on why you are here. – codeman Oct 06 '13 at 09:53
  • You put zero effort to ask question properly: Here: http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist And if you would have followed those known guidelines for asking question, you would on the way fix your "question". You did not learn anything new from those answers, you just fixed typos in your code. True? – Nenad Oct 06 '13 at 12:41
  • Follow the link please: [How to ask](http://stackoverflow.com/questions/how-to-ask "How to ask") – Nenad Oct 06 '13 at 13:24
  • Yes, to change account name when offending people. – Nenad Oct 06 '13 at 14:46
  • 2
    Although stripping off extraneous code is a good idea and good form, Nenad needs to be careful of tone, its hard to interpret it over the internet. 50/50 split. – woody121 Dec 24 '13 at 15:42
1

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>
Max
  • 1,150
  • 9
  • 13