Question

再次是我:) 我仍处于angularJS的最开始，我刚刚遇到了一个有问题的问题。我有一个数组，其中包含一些我希望在页面上呈现的数据，这就是为什么我使用ng-repeat但我还需要在前一个中包含另一个ng-repeat。我在dialogWindows中有一般的ng-repeat =“对话框”，在DOM ng-repeat =“dialog.inputs中的输入”中有较低的值，但是第二个ngRepeat dousnt工作并且它在coonsole中没有报告错误。你可以帮帮我吗？

这是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);

这是我的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-->

任何帮助将不胜感激。谢谢

Answer 1

只是一个错误;

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

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

作为旁注：

使用<pre>{{input|json}}</pre>作为基本调试程序来检测问题

参见 Fiddle

Answer 2

在嵌套循环中，您必须使用ng-repeat，而不是ng-repat。如果您在发布问题之前将示例标记从不必要的垃圾中删除，您可能会自己发现错字。

然后，你在示例中缺少ng-app="antroApp"指令。

然后，控制器是dialogWindows，而不是antroApp：

antroApp.controller('dialogWindows', dialogWindows);

Answer 3

根据Nenad的回答错过结束div，拼写错误，App和Controller的命名相同，控制器和范围变量的命名相同...哎呀我的思绪很痛，无论如何，这里是result at jsbin

编辑:(根据minitech请求）这是一个替代版本，jsbin中的示例已经删除了不必要的代码

<!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>

角度嵌套的ng-repeat失败

3 个答案: