javascript - 如何在表中显示多个 ng-repeat 中的所有数据

Question

嘿，我在 ng-repeat 中遇到了一些问题，我想在片段中询问这段代码。好的，所以我尝试显示所有数据， 1. 我用 ng-repeat-start 显示 name。 2. 我用 ng-repeat 和 3. 我再次用 ng-repeat 显示 answear问题是，在我在第 3 步中尝试 ng-repeat 之后，我回答为什么名称和问题不显示？以及如何显示所有这些数据？？

1. name/title // in this code not showing => must show
2. the Questions // in this code not showing => must show
3. Answears => 1 2 3 4 5 // is showing

谢谢

var $scope;
var app = angular.module('miniapp', []);

function Ctrl($scope) {
    $scope.instructors = [{
        id: 1,
        name:"A",
        questions:[
            {"ask":"what is apple?"},
            {"ask":"what is apple1?"},
            {"ask":"what is apple2?"}
        ]
     
    }, {
        id: 2,
        name:"B",
        questions:[
            {"ask":"what is pier?"},
            {"ask":"what is pier1?"},
            {"ask":"what is pier2?"}
        ]
    }
    , {
        id: 3,
        results:[
            1,2,3,4,5,6,7,8,9,10
        ]
    }
  ];
}

  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div ng-app="miniapp">
    <div ng-controller="Ctrl">
         <table class="table table-striped table-border">
                    <!-- <thead style="border-style:1px black"> -->
                      <tr>
                        <!-- <th>NO</th> -->
                        <th>Title</th>
                        <th>#</th>
                        <th>Question</th>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                      </tr>
                    <!-- </thead> -->
                    <!-- <tbody> -->
                      <tr ng-repeat-start="DataQuest in instructors">
                        <tr ng-repeat="a in DataQuest.questions">
                          <tr ng-repeat="b in DataQuest.results track by $index">
                          
                          
                            <td ng-if="!$first"></td>
                            <td ng-if="$first">{{DataQuest.name}}</td>
                            <td>{{$index + 1}}</td>
                            <td>{{a.ask}}</td>
                            <td>{{b}}</td>
                            <td>{{b}}</td>
                            <td>{{b}}</td>
                            <td>{{b}}</td>
                            <td>{{b}}</td>
                            
                      <tr ng-repeat-end></tr>    
                        </tr></tr>                    
                    <!-- </tbody> -->

                  </table>
    </div>
</div>

Answer 1

我做了一个 fiddle ，我认为这远非您的目的那么完美，

但这也许能帮到你。

请看这个 fiddle 。

ng-repeat inside of ng-repeat

<tbody ng-repeat="question in instructors track by $index">
    <tr ng-repeat="ask in question.questions track by $index">
        <td>{{question.name}}</td>
        <td>{{$index+1}}</td>   
        <td>{{ask.ask}}</td>
        <td>{{b}}</td>
        <td>{{b}}</td>
        <td>{{b}}</td>
        <td>{{b}}</td>
        <td>{{b}}</td>
    </tr>
</tbody>

检查这个并告诉我更多关于你想要什么。 :)

.

.

.

更新

我带来了更新的 fiddle 。请检查这个。

ng-repeat inside of ng-repeat(2)

line 20, 21, 22, 23, 24 of fiddle

<td>{{instructors[instructors.length-1].results[instructors[$parent.$index-1].questions.length + $index]}}</td>

这是为了计算“结果”的索引并获取其值(value)。

而且它可能太困惑而难以理解。

我认为“结果”总是在“$scope.instructors”的最后一个索引中。

所以 'instructors.length-1' 用于计算最后一个索引。

'instructors[$parent.$index-1].questions.length'是获取最后一个'questions'的长度，

这是因为继续索引到下一个“结果”。

我知道我的回答不符合逻辑，但这是我所能建议的最好的结果。