Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have seen this amazing drop down [on codrops][1]. But I need to use this in an AngularJS application. How can I use this JQuery plugin in my AngularJS application. I am very new to AngularJS. Is there a better way to do it just in AngularJS without using the pligin?

Edit

I have tried the following directive

heeloApp.directive('dropDown', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).dropwdown(scope.$eval(attrs.dropDown));
        }
    };
});

and here is the html for my select drop down but it dont seem to work.

<select id="cd-dropdown" class="cd-select" drop-down>
                        <option value="-1" selected>Choose your favorite animal</option>
                        <option value="1" class="icon-monkey">Monkey</option>
                        <option value="2" class="icon-bear">Bear</option>
                        <option value="3" class="icon-squirrel">Squirrel</option>
                        <option value="4" class="icon-elephant">Elephant</option>
                    </select>

The error I can see is

TypeError: Object [object Object] has no method 'dropwdown'
    at link (http://localhost:8000/js/app.js:216:24)
    at nodeLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:13214:13)
    at compositeLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:12624:15)
    at publicLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:12529:30)
    at prelink (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:33274:9)
    at nodeLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:13194:13)
    at compositeLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:12620:15)
    at publicLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:12529:30)
    at link (http://localhost:8000/ionic-v0.9.26/js/angular/angular-route.min.js:7:348)
    at nodeLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:13214:13) <select id="cd-dropdown" class="cd-select" drop-down=""> 


  [1]: http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists
share|improve this question
    
You should create a directive for this. If you google a bit you'll find examples and how-to's about creating a jquery directive. –  Hatsjoem Apr 18 at 15:48
    
@Hatsjoem I have tried the code as in the edit in above question. –  Zaheer Baloch Apr 18 at 16:00
1  
I suspect that the function is dropdown and not dropwdown –  Gruff Bunny Apr 18 at 16:04
    
@GruffBunny You are right! Such a stupid mistake! Thanks for your awesome help. –  Zaheer Baloch Apr 18 at 16:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.