CODEWITHSUNDEEP
htmlcsshtml-table
thb7
thb7

Reputation: 125

Angular HTML Markup - Table causing error

I have a value foo, and this code displays its properties correctly with the following code: 

<div class="col-md-6">
    <p> {{ foo.name }} </p>
    <p visible = "foo.description"> {{ foo.description }}</p>
    <p> {{foo.tags }} </p>
    <p visible = "foo.instructions"> {{ foo.instructions }} </p>
</div>

It displays four paragraphs, each with the value of foo.property

However, when I add a table underneath:

<div class="col-md-6">
    <p> {{ foo.name }} </p>
    <p visible = "foo.description"> {{ foo.description }}</p>
    <p> {{ foo.tags }} </p>
    <p visible = "foo.instructions"> {{ foo.instructions }} </p>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>File Name</th>
          <th>File Type</th>
          <th>File Size</th>
          <th> 3D View </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat-start="file in foo.fileId">
          <td> filler </td>
          <td> filler </td>
          <td> filler</td>
          <td> filler </td>
        </tr>
      </tbody>
    </table>
</div>

The values now show literally as {{ foo.description }} rather than showing the value. Why would adding a simple table mess that up?

Upvotes: 1

Views: 64

Answers (1)

jrkt
jrkt

Reputation: 2715

Ah, I figured it out. You have an 'ng-repeat-start' but you never end it. You need to include an 'ng-repeat-end'. Or, just use the normal 'ng-repeat' and then you don't have to specify a start and an end. This works: 

<div class="col-md-6">
 <p> {{ foo.name }} </p>
 <p visible = "foo.description"> {{ foo.description }}</p>
 <p> {{ foo.tags }} </p>
 <p visible = "foo.instructions"> {{ foo.instructions }} </p>
 <table class="table table-hover">
  <thead>
    <tr>
      <th>File Name</th>
      <th>File Type</th>
      <th>File Size</th>
      <th> 3D View </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="file in foo.fileId">
      <td> filler </td>
      <td> filler </td>
      <td> filler</td>
      <td> filler </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions