Search code examples
htmlangular-ui-bootstrapthymeleafangular-ui

Assigning values to classes in html - UI Bootstrap


I have a dropdown in my html:

<div class="btn-group" uib-dropdown is-open="status.isopen">
   <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
   Button dropdown <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
      <li role="menuitem"><a href="#">Action</a></li>
      <li role="menuitem"><a href="#">Another action</a></li>
      <li role="menuitem"><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li role="menuitem"><a href="#">Separated link</a></li>
   </ul>
</div>

Wherein, I'm using thymeleaf template in my html. I got to know that, spring thymeleaf does not allow any incomplete options in the working html.

<html xmlns:th="http://www.thymeleaf.org">

And while launching this via Spring Boot App, I get an exception,

Attribute name "uib-dropdown" associated with an element type "div" must be followed by the ' = ' character.

Can someone help me with what would I assign this uib-dropdown, uib-dropdown-toggle and uib-dropdown-menu options?


Solution

  • You can append angular attributes or directives with data-<ng att>

        <div class="btn-group" data-uib-dropdown="" is-open="status.isopen">
       <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
       Button dropdown <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
          <li role="menuitem"><a href="#">Action</a></li>
          <li role="menuitem"><a href="#">Another action</a></li>
          <li role="menuitem"><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li role="menuitem"><a href="#">Separated link</a></li>
       </ul>
    </div>