How to show all data in multiple ng-repeat in table

Question

Hayy all i have some problem in ng-repeat i want ask this code in snippet. okey so i try to show all data, 1. i show the name with ng-repeat-start. 2. i show the questions with ng-repeat and 3. i show the answear with ng-repeat again and the problem is, after i try ng-repeat in the step 3 for the show answears why the name and questions not show? and how to show this all data??

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

thanks

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>

All nested ng-repeat has their own scope. Use $parent to access the parent scope. — Mert Mertce
– Mert Mertce, Commented Nov 23, 2017 at 8:02
You're not ending your </tr> tag, instead of ng-repeat-start use ng-repeat and instead <tr ng-repeat-end></tr> replace with </tr>. — anteAdamovic
– anteAdamovic, Commented Nov 23, 2017 at 8:06

Canet Robern · Accepted Answer · 2017-11-28 04:13:10Z

1

I've made a fiddle and I think this is far from perfect as your purpose,

but this might be able to help you.

Please see this 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>

Check this and tell me more about what you want. :)

.

UPDATE

I've brought updated fiddle. Please check this.

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>

This is for calculating index of 'results' and getting value of that.

And it might be too messy to understand.

I supposed that 'results' is always in last index of '$scope.instructors'.

So 'instructors.length-1' is for calculating last index.

'instructors[$parent.$index-1].questions.length' is to get length of very last 'questions',

it's because continuing index to next of 'results'.

I know my answer is not good logic, but this is the best result as possible as I can suggest.

edited Nov 28, 2017 at 4:13

answered Nov 27, 2017 at 1:37

Canet Robern

1,0692 gold badges11 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Adriyana Putra Pratama Over a year ago

hay thanx, I've tried it but I have to show all the data including the answer. and you provide the answer by simply displaying the questions.

Canet Robern Over a year ago

@AdriyanaPutraPratama An atmosphere of your comment is like my professor.. :( I cannot provide more codes because I couldn't understand your purpose exactly..

Canet Robern Over a year ago

@AdriyanaPutraPratama Could you post some pictures of the result that as you expected?

Adriyana Putra Pratama Over a year ago

hehe :) sorry for comment, so you look in fiddle up there, if you delete <tr ng-repeat="b in DataQuest.results track by $index"> he show only the questions, but if <tr ng-repeat="b in DataQuest.results track by $index"> not delete, he just show the answear and i want show all data like name, questions and the answear.

Adriyana Putra Pratama Over a year ago

hahah your code keeps my mind open and knows its shortcomings

|

Collectives™ on Stack Overflow

How to show all data in multiple ng-repeat in table

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related