0

I am using the nav-tab class in bootstrap but I have these tabs as content to an accordion's panel body. I'm using Ng-repeat to fill in the number of tabs and the content of the tags. 

<div class="panel-body">
                                <ul class="nav nav-tabs">
                                    <li ng-repeat="sub in All | unique:'onderwerpen'"><a data-toggle="tab" href="#{{sub.onderwerpen}}">{{sub.onderwerpen}}</a></li>
                                </ul>

                                <div class="tab-content">
                                    <div id="{{sub.onderwerpen}}" class="tab-pane fade active">
                                        <table class="table table-bordered text-center">
                                            <thead>
                                                <tr>
                                                    <th>Jaar</th>
                                                    <th>Waarde</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>John</td>
                                                    <td>Doe</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

this is the code for the nav-tabs, but I think the id's I variably assign using the {{sub.onderwerpen}}isn't appointing correctly but I don't know what's wrong. I don't know if this is relevant but the sub.onderwerpen only gives back strings that contain spaces, would this be the issue? if so, how can I fix this? Before answering, I am not able to use {{$index}} as a parameter to bind to id's because I used that in the parent panel.

Tom Kustermans
  • 521
  • 2
  • 8
  • 31

1 Answers1

0

The ng-repeat directive creates new child scope and assigns sub variable in this scope.

<div class="tab-content"> is in the parent scope relatively to scope which contains sub variable so it can't see it.

You need another ng-repeat inside your tab-content div.

<div class="panel-body">
  <ul class="nav nav-tabs">
    <li ng-repeat="sub in All | unique:'onderwerpen'">
      <a data-toggle="tab" ng-href="#{{sub.onderwerpen}}">{{sub.onderwerpen}}</a>
    </li>
  </ul>

  <div class="tab-content">
    <div ng-repeat="sub in All | unique:'onderwerpen'" id="{{sub.onderwerpen}}" class="tab-pane fade">
      <table class="table table-bordered text-center">
        <thead>
          <tr>
            <th>Jaar</th>
            <th>Waarde</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Also please use ng-href when your link contains variable.

Also note that if sub.onderwerpen is used as id of DOM element then it

  • Must contain at least one character
  • Must not contain any space characters
  • In HTML, all values are case-insensitive
Ruslan Stelmachenko
  • 4,987
  • 2
  • 36
  • 51
  • oh ofcourse !!! I'l l'll try that and let you know if it works. Also thanks for the ng-href. never heard of this before. but could I use data-target instead aswell ? – Tom Kustermans Jan 13 '16 at 23:20
  • I don't know what is `data-target`. I think it is some specific to `bootstrap`. – Ruslan Stelmachenko Jan 13 '16 at 23:23
  • Also please see my edit about html `id` attribute and it's restrictions. – Ruslan Stelmachenko Jan 13 '16 at 23:25
  • yes indeed it's bootstrap specific. I will certainly check it out ;) thanks – Tom Kustermans Jan 13 '16 at 23:39
  • I understand the fact that the `id` may not contain spaces, but I'm using angular databinding to give these tags a unique `id`, but the values that are binded to these `id`'s contain spaces in their value, how would you suggest I could fix that? – Tom Kustermans Jan 14 '16 at 11:03
  • You can just replace all spaces in them by some character which they doesn't contain already (to preserve uniqueness). For example `idWithSpaces.replace(/\s/g, '-')`. You can make angular filter to do it inline like `id="{{sub.onderwerpen | replaceSpaces}}"`. But it potentially can violate the uniqueness if some of id already contains this character. (`a-b` and `a b` will both become `a-b`). I recommend add some new generated `id` field for this. It can be a counter with prefix or [uuid](http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript). – Ruslan Stelmachenko Jan 14 '16 at 14:30