1

又是我 :) 我还处于 angularJS 的起步阶段，我刚刚遇到了一个有问题的问题。我有一个数组，其中包含一些我想在页面上呈现的数据，这就是我使用 ng-repeat 的原因，但我还需要在前一个中包含另一个 ng-repeat。我有一般的 ng-repeat="dialog in dialogWindows" 和较低的 DOM ng-repeat="input in dialog.inputs"，但是第二个 ngRepeat 没有工作，它在控制台中没有报告错误。你能帮我吗？

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

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

4

3 回答 3

2

只是一个错误；

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

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

作为旁注：

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

看Fiddle

于 2013-10-06T08:44:10.193 回答
1

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

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

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

antroApp.controller('dialogWindows', dialogWindows);
于 2013-10-06T08:41:57.953 回答
1

缺少关闭 div，根据 Nenad 的回答拼写错误，App 和 Controller 的命名相同，控制器和范围变量的命名相同......无论如何，我的心很痛，这是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>
于 2013-10-06T08:56:47.033 回答