Create dropdownlist like effect angularjs

Question

User2108892867 posted

Hello everyone, I have this requirement that I need to create a dropdownlist from a custom markup created in angular js. So here is my js fiddle:

http://jsfiddle.net/m1gzahkr/

Could someone tell me what I did wrong here? So when you click on select mentor, the dropdown shows up and it should not hide when you click anywhere on the dropdown content. But if you click outside of the content, it should hide the dropdown. After you select your mentors and click save, the selected mentors should show up and you could remove the mentor by clicking the cross sign next to each selected mentor. Thanks

Answer 1

User2108892867 posted

Hello everyone, after some testing and here is the updated version of my jsfiddle:

http://jsfiddle.net/3vywfh2x/1/

So now here are a few things I would like to solve. 

1. After clicking save, to open the dropdown again, I would need to click on the name to open the dropdown. How could I make it so that I can click any where on the blue div to open the dropdown again? 
2. When I clicked on the cross sign to remove the mentor, the dropdown open. How could I stop that?  I want to remove that mentor without opening the dropdown.

Thanks. 

Answer 2

User1724605321 posted

Hi asplearning ,

After clicking save, to open the dropdown again, I would need to click on the name to open the dropdown. How could I make it so that I can click any where on the blue div to open the dropdown again? 

Then append the open dropdownlist function to that area :

$(document).click(function(e) {
  var container = $(".my-dropdown");
  $(".my-dropdown").click(openCloseDropDown);
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    $(".my-dropdown-content").removeClass('show');
  }
});

When I clicked on the cross sign to remove the mentor, the dropdown open. How could I stop that?  I want to remove that mentor without opening the dropdown.

Not sure about the feature , but you could close the dropdown by :

 $(".my-dropdown-content").removeClass('show');

Best Regards,

Nan Yu