AngularJs Create table

Question

So I want to create a table something similar to this

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!

Upalr · Accepted Answer · 2015-12-17 12:17:04Z

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>

edited Dec 17, 2015 at 12:17

answered Dec 17, 2015 at 10:51

Upalr

2,1462 gold badges25 silver badges33 bronze badges

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

Comments

Jax · Accepted Answer · 2015-12-17 12:02:58Z

1

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.

edited Dec 17, 2015 at 12:02

answered Dec 17, 2015 at 9:34

Jax

1,8373 gold badges18 silver badges30 bronze badges

1 Comment

WilloPillow Over a year ago

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

Collectives™ on Stack Overflow

AngularJs Create table

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related