0

Im trying to tag different video items in a bootstrap table. I'm already using an ng-repeat to loop over the array of objects which store video data. I'm now trying to create a nested ng-repeat to loop over another array of "tags" within the ng-repeat that creates each table row.

I'm getting some weird results though. I was hoping that I could just put an ng-repeat on the td and then put the angular expression in a span with the boostrap class "badge". Any thoughts as to whats going wrong?

http://jsfiddle.net/jheimpel/6nh100ca/

       <tr ng-repeat="topic in topics">
          <td><a ng-href="#/{{topic.url}}"><i class="fa fa-play"></i></a></td>
          <td>{{topic.topic}}</td>
          <td>{{topic.date}}</td>
          <td>{{topic.presenter}}</td>
          <td ng-repeat="tag in topic.tags">
                <span class="badge">{{topic.tags}}</span>
          </td>
       </tr>
JDH
  • 159
  • 1
  • 1
  • 11

1 Answers1

0

Change it to

<span class="badge" ng-bind="tag"></span>

You're telling it to print out the array you're ng-repeating instead of the object the ng-repeat is giving you. Also ng-bind is better, see this

Community
  • 1
  • 1
Ben Black
  • 3,751
  • 2
  • 25
  • 43
  • 1
    OK cool that works! I also changed the ng-repeat to the span tag as it was creating multiple table cells instead of the actual span. – JDH Dec 10 '14 at 17:10