CODEWITHSUNDEEP
htmlangularjsdropdown
srv
srv

Reputation: 61

bootstrap dropdown not working in angularjs

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>

Upvotes: 1

Views: 1809

Answers (1)

Khalid T.
Khalid T.

Reputation: 10567

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>

Upvotes: 1

Related Questions