How to create this custom select control with AngularJS directive?

[Chris Peele]

Hey guys! I'm a bit new to AngularJS and am trying to write a custom select control based on Zurb Foundation's custom select(see here: http://foundation.zurb.com/docs/components/custom-forms.html)

I know I need to use a directive for this but am not sure how to accomplish this.

It's going to have to be reusable and allow for the iterating of whatever array is passed in to it. A callback when the user selects the item from the dropdown list is probably needed. 

Here is the markup for the custom Foundation dropdown list:

        <select name="selectedUIC" style="display:none;"></select>

        <div class="custom dropdown medium" style="background-color:red;">

            <a href="#" class="current custom-select">Please select item</a>

            <a href="#" class="selector custom-select"></a>

            <ul ng-repeat="uic in uics">

                <li class="custom-select" ng-click="selectUIC(uic.Name)">{{uic.Name}}</li>

            </ul>

        </div>

This works for now. I am able to populate the control from this page's Ctrl. However, as you can see, I'd have to do this every time I wanted to use a custom dropdown control.

Any ideas as to how I can turn this baby into a reusable directive?

Thanks for any help!

Chris

[Chris Peele]

Sorry, here is the code on plunkr:

http://plnkr.co/edit/IfEnkTlqfzjAa3HBFUzS

[Clint Checketts]

The plunkr isn't running. Looks like you deleted all the contents of the index.html except your stuff

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Chris Peele]

Hey Clint! It wasn't meant to run. All it does it populate the dropdown. I just provided the markup so that folks could see what needs to be converted into a directive.

Thanks,

Chris

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/M2vUlOfIAr8/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Clint Checketts]

If you have a running plunkr I could help you convert it. My next meeting looks boring... maybe I'll make the plunkr myself....

[Chris Peele]

lol, sounds good! I'll try and get that up for you. Might have to use jsFiddle as I am a bit more familiar with linking to external libraries (zurb foundation)...

Thanks so much!

[Clint Checketts]

Here is a working plunkr with an initial directive: http://plnkr.co/edit/XRQc9rdoTy0mweCJz8Ci?p=preview

Feel free to fork it and update the index.html to include the Zurb files.  We can make it more reusable, (abstracting out the uic.name calls for example). Let me know when you have it rendering how you like. Also, ask any questions regarding the directive itself so I can clarify.

app.directive('peeleSelect', function(){

  return {

    scope: {

      values : "=peeleSelect" ,

      selectCallback : "="

    },

    template: '<select name="selectedUIC" style="display:none;"></select>'+

              '<div class="custom dropdown medium" style="background-color:red;">'+

                  '<a href="#" class="current custom-select">Please select an item</a>'+

                  '<a href="#" class="selector custom-select"></a>'+

                  '<ul ng-repeat="uic in values">'+

                  '    <li class="custom-select" ng-click="selectCallback(uic.name)">{{uic.name}}</li>'+

                  '</ul>'+

              '</div>',

    link: function(scope,elem, attr){

      

    }

  }

});

[Chris Peele]

whoa!! thanks so much! I'll get those styles added to it and send it back out!

[Chris Peele]

Hey Clint, here is a link to a plunkr with the zurb foundation css file, however for some reason the styles are not taking. Is this because the markup is inline code in the directive?

http://plnkr.co/edit/fifIy1PwSIKlgHxcYl16?p=preview

[Clint Checketts]

Does Zurb require jQuery or other JS? Those might need to be added to the index.html file to

[Chris Peele]

doh! yes, yes it does. I'll update the plunkr!

[Chris Peele]

I added the required libraries, but still no cigar...

http://plnkr.co/edit/fifIy1PwSIKlgHxcYl16?p=preview

[Clint Checketts]

I think there are more libraries needed. The foundation webpage mentions something about forms.js and zepto

[Christian Dannie Storgaard]

Technically, the foundation.forms.js script is needed, but it will interfere with AngularJS since both will try to manipulate the DOM.

Here's a version that replicates just enough of foundation.forms.js to make the widget work - it also doesn't need the rest of foundation.js:

http://plnkr.co/edit/WxfQK18uAr4QKRTw5JQL

The reason the style didn't work in the previous plunkr, is because it looks for a form with a class "custom".

[Chris Peele]

Wow! That's it! Thank you both very much! Hopefully we can get an "Angular-UI Foundation" version out there someday. I prefer it over Bootstrap.

Thanks again and take care!!

Chris

[Jure Triglav]

This works nicely, I've extracted the template out from the directive and I'm referencing it with a templateUrl, but that's more of a pet peeve.

I also added the currently selected value to the custom-select:

 <a class="current custom-select">{{ current || 'Choose' }}</a>

I am however having issues with Angular navigating to '#', when I click the div to select an option. For some reason the <a>s are gobbling up those events. That's the one remaining issue with this approach. Oh... that and the lack of keyboard selection.