1

I'm creating a social network site using AngularJS with bootstrap, the site is almost done but dropdown does NOT work.

I have tried many solutions online but none of them seem to work.

"ui.router" and "ui.bootstrap" are in my app.js so that is not the problem

enter image description here

HTML:

<div role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/voting" class="navbar-brand">{{ settings.sitename }}</a>
        </div>
        <div class="navbar-collapse collapse">

            <form role="search" class="navbar-form navbar-right" ng-if="isSignupPage">
                <div class="form-group">
                    {{ 'already_registered' | translate }}
                </div>
                <a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a>
            </form>
            <form role="search" class="navbar-form navbar-right" ng-if="isLoginPage">
                <div class="form-group">
                    {{ 'no_account_signup' | translate }}
                </div>
                <a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a>
            </form>
        </div><!--/.nav-collapse -->
    </div>
</div>

I'm using angular 1.4.0

1 Answer 1

3

You forgot about dropdown directive. Angular bootstrap documentation says: Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.

 <div class="btn-group" dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="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>

So related to your code.

<div role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/voting" class="navbar-brand">{{ settings.sitename }}</a>
        </div>
        <div class="navbar-collapse collapse">
            <div class="btn-group" dropdown is-open="status.isopen">
                <button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
            Button dropdown 
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
                    <li role="menuitem">
                        <a href="#">
                            <form role="search" class="navbar-form navbar-right" ng-if="isSignupPage">
                                <div class="form-group">

                        {{ 'already_registered' | translate }}
                    </div>
                                <a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a>
                            </form>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <form role="search" class="navbar-form navbar-right" ng-if="isLoginPage">
                                <div class="form-group">
                        {{ 'no_account_signup' | translate }}
                    </div>
                                <a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a>
                            </form>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.