CODEWITHSUNDEEP
htmlangularjs
WilloPillow
WilloPillow

Reputation: 77

AngularJs Create table

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!

Upvotes: 1

Views: 80

Answers (2)

Upalr
Upalr

Reputation: 2148

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>

Upvotes: 1

Jax
Jax

Reputation: 1843

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.

Upvotes: 1

Related Questions