角度嵌套ng重复失败

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

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

任何帮助将是appreciated.Thanks

来源

2013-10-06 codeman

只是单一的错误;

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

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

作为一个方面说明：

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

看到Fiddle

来源

2013-10-06 08:44:10

谢谢你帮助我。是的，问题在于ng-repeat的命名。我一直工作到凌晨4点，然后我去睡觉，并在上午9点醒来，然后回到工作岗位，这就是为什么我忽略它。 – codeman

有趣的是，它没有删除编译erorr –

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

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

然后，控制器dialogWindows，不antroApp：

antroApp.controller('dialogWindows', dialogWindows);

来源

2013-10-06 08:41:57 Nenad

如果你的答案是：“在你的嵌套循环，你必须使用NG重复，而不是NG-repat。然后，控制器是dialogWindows，而不是antroApp“我会给你批准的，但是其中的50％实际上是指责我不知道答案，尽管它是人们如何不知道和寻求帮助的地方那些更有经验的人你在为什么你在这里的时候没有通过测试来证明你为什么 – codeman

你毫不费力地提出问题：这里：http://meta.stackexchange.com/questions/156810/stack-overflow-问题清单如果你会按照已知的指导方针提问，你就会在修复你的“问题”的时候，你没有从这些答案中学到任何新东西，你只是在你的代码中修正了错别字，真的？ – Nenad

关注链接请：[如何问]（http://stackoverflow.com/questions/how-to-ask“如何问”） – Nenad

缺少结束的div，错字按照内纳德答案，为应用程序和控制器，控制器和范围变量相同的命名相同的命名......哎哟我的心好痛，反正，这里是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>

来源

2013-10-06 08:56:47 Max

请把你的答案的细节放在...回答:) – Ryan

角度嵌套ng重复失败

回答

相关问题