0

My issue is same with question How to manually toggle angular-ui-select dropdown, but in my case, i just use single select feature.

Generally, I'm using AngularUI's ui-select to create single select on a page. I need to be able to open the dropdown list when a user clicks on a button on the page.

I've tried using jQuery's .click(), .trigger('click') but they're not working.

This plunker has been forked with Singe Select Option:

http://plnkr.co/edit/0OKTgpURgAk7CCG0GIxC?p=preview

How can I toggle the dropdown manually, from outside the ui-select element's context?

Update:

  • In this plunker (plnkr.co/edit/7wXP6cSqPaDlvhEbkNau?p=preview), the version of ui-select is 0.9.x, they use the button to active the event, and we can use $("#"+attrs.openMenuByClick).find('button').click(); (Thank @sdfacre for this help)

  • The new version of ui-select is 0.13.2, they use the <span> instead <button>, so how can I call ng-click function when they use <span> without using directive?

http://plnkr.co/edit/0OKTgpURgAk7CCG0GIxC?p=preview

Community
  • 1
  • 1
Envy
  • 510
  • 6
  • 19
  • I think it would be good if you could edit your question to include the additional info present in the other question, just so it clearly stands by itself. – ajshort Jan 18 '16 at 04:10
  • Hi @ajshort, the option is just changed from muliselect to single select. I have edited the question and put more info. – Envy Jan 18 '16 at 04:26

1 Answers1

1

seems like with single select, the toggle control is on a button not an input.

so, try this

$("#"+attrs.openMenuByClick).find('button').click();

plunker is also available here http://plnkr.co/edit/r2Iufl9CcNRV6iozvWQj?p=preview

sdfacre
  • 1,273
  • 7
  • 7
  • It's not work. Did you test yourself on plunker and that worked? – Envy Jan 18 '16 at 05:11
  • interesting, I did test this on plunker. Anyway, sorry about that, I will paste the plunker link here later. – sdfacre Jan 18 '16 at 05:55
  • I might somehow mixed up something when I was testing it. I have fixed the answer and provided the link to plunker. please check. Sorry for the confusion. – sdfacre Jan 18 '16 at 06:03
  • Thank you. It works. But sorry so much, I didn't check the version of ui-select library when fork the plunker. In that plunker, version of library is 0.9.x. My real issue is on version 0.13.2. Sorry, it's my fault. I have updated the plunker on http://plnkr.co/edit/0OKTgpURgAk7CCG0GIxC?p=preview. Could you take a look for me again? – Envy Jan 18 '16 at 12:41
  • No problem. Your new plunker works for me, what would you like me to look exactly? – sdfacre Jan 19 '16 at 01:58
  • Sorry, that issue is resolved. But without directive, can we trigger the ui-select? I have updated the plunker with example when we do not use directive: plnkr.co/edit/0OKTgpURgAk7CCG0GIxC?p=preview. – Envy Jan 19 '16 at 04:10
  • I don't see why you can't do that without directive. having a directive is just to make life easier if you have this requirement in multiple places. you can even implement this in a separate javascript function outside of angular. there are many ways to achieve this, you just pick what suit you the best. – sdfacre Jan 19 '16 at 04:25
  • Yes, we can use directive to resolve this issue. But if you take a look at my plunker, you can see we can not trigger ui-select without using directive. I so curious about the reason. – Envy Jan 20 '16 at 08:04
  • I already tried it, The trigger button works for me. could it be a browser issue? – sdfacre Jan 20 '16 at 08:14
  • I don't know why it failed when I tested =.=' It works now. Thank so much, sdfacre – Envy Jan 21 '16 at 03:26