AngularJs Create table

Question

So I want to create a table something similar to this

enter image description here

with this data

$scope.data = [
 {question : 1, answer : a},
 {question : 1, answer : b},
 {question : 1, answer : c},
 {question : 2, answer : b},
 {question : 2, answer : a},
 {question : 3, answer : c},
]

So far this is what i have

<tbody ng-repeat="(key,value) in data" ng-init="current=null">
 <tr>
 <td><span ng-if="current != value.question">{{value.question}}</span></td>
 <td>{{value.answer}}</td>
 <td class="hidden">{{ current = value.question }}</td>
 </tr>
</tbody>

would be glad if you could help and enlighten me thank you!

Answer 1

modify your $scope.data first:: provide "" for key. Here is the DEMO

$scope.data = [
 {"question" : 1, "answer" : "a"},
 {"question" : 1, "answer" : "b"},
 {"question" : 1, "answer" : "c"},
 {"question" : 2, "answer" : "b"},
 {"question" : 2, "answer" : "a"},
 {"question" : 3, "answer" : "c"}
]

View: instead of use ng-if use ng-show for maintaining the structure of table.

<table>
 <tbody ng-repeat="(key,value) in data">
 <tr>
 <td ng-show="data[key-1].question != value.question">{{value.question}}</td>
 <td>{{value.answer}}</td>
 <td class="hidden">{{ current = value.question }}</td>
 </tr>
 </tbody>
</table>

Answer 2

What you have there in data is an array of objects, and you are using the syntax for looping over objects and not arrays in your ng-repeat.

Just change like so:

<table>
 <thead>
 <th>Question#</th>
 <th>Answer#</th>
 </thead>
 <tbody ng-repeat="value in data" >
 <tr>
 <td><span>{{value.question}}</span></td>
 <td>{{value.answer}}</td>
 </tr>
 </tbody>
</table>

Here is a fiddle to get you on your way.

• WilloPillow: will this generate the table structure like i posted above? thanks