如何在表

时间:2017-11-23 07:56:13

标签: javascript angularjs

Hayy我在ng-repeat中遇到了一些问题我想在代码片段中询问此代码。 哦,所以我试图显示所有数据,  1.我展示name with ng-repeat-start。  2.我用ng-repeat和{显示问题  3.我再次向ng-repeat展示了衣服 问题是,在我尝试重复 - 在步骤3中为节目回答为什么名称和问题没有显示?以及如何显示所有数据?

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>

1 个答案:

答案 0 :(得分:1)

我做了一个小提琴,我认为这远非完美作为你的目的,

但这可能会对你有帮助。

请看这个小提琴。

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>

检查一下并告诉我更多关于你想要的东西。 :)

<强>更新

我带来了更新的小提琴。请检查一下。

ng-repeat inside of ng-repeat(2)

  

小提琴第20,21,22,23,24行

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

这是用于计算&#39;结果的索引&#39;并获得价值。

理解它可能太乱了。

我认为&#39;结果&#39;始终位于&#; $ scope.instructors&#39;。

的最后一个索引中

所以&#39; instructors.length-1&#39;用于计算最后一个指数。

&#39;指导员[$ $父索引-1] .questions.length&#39;是为了得到最后一个问题&#39;

的长度

它是因为继续索引下一个&#39;结果&#39;。

我知道我的答案不是很好的逻辑,但这是我能提出的最佳结果。