bootstrap dropdown not working in angularjs

Question

I wanted to show a dropdown on click of the img icon but the dropdown is not opening on click, Here is my code.

<div class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="user-image" style="background-image: url('../images/rafi.jpg');"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li>
        <div class="profile-pic">
            <img src="images/rafi.jpg" alt="Rafi Ali Khan">
        </div>
    </li>
    <li>
        <h3>{{$scope.userLocalData[0].uname}}</h3></li>
    <li><a href="" class="text-right">Profile</a></li>
    <li><a href="" class="text-right">Log Out</a></li>

</ul>
</div>

Not sure about your question. very unclear. But if it helps, angular-ui.github.io/bootstrap — Giri, Commented May 4, 2016 at 6:02
@giri my question is that I'm using this code for showing a dropdown on click of the img tag, but on click nothing happens. Something like this... getbootstrap.com/components/#dropdowns — srv, Commented May 4, 2016 at 6:32
i dont see any events binded to your image tag , you need to add a ng-click directive — dreamweiver, Commented May 4, 2016 at 6:46
@srv try adding that library and setting up since you are ussing angular, binding needs to be thru a directive. It might still work without, but I would recommend using the library i suggested. — Giri, Commented May 4, 2016 at 6:48

Khalid T. · Accepted Answer · 2016-05-04 06:45:47Z

Your code contains some invalid HTML markup. For example, I assume you mean role="button" instead of type="button" for the anchor element. Also, you should use href="#" or data-target="#" instead of href="javascript:void(0);". You could try this:

<div class="dropdown">
  <a href="#" class="dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    <span class="user-image" style="background-image: url('../images/rafi.jpg');"></span>
  </a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li>
      <div class="profile-pic">
        <img src="images/rafi.jpg" alt="Rafi Ali Khan">
      </div>
    </li>
    <li><h3>{{$scope.userLocalData[0].uname}}</h3></li>
    <li><a href="" class="text-right">Profile</a></li>
    <li><a href="" class="text-right">Log Out</a></li>
  </ul>
</div>

Collectives™ on Stack Overflow

bootstrap dropdown not working in angularjs

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related