3

I'm trying to implement a dropdown menu on angular. So far I got the list of items to print out, but it looks like the following image:

enter image description here

Simply put, it has no style applied to it. Here's what my code looks like.

index.jade

!!!
html
    head
    script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js')
    script(src='js/lib/uibootstrap/ui-bootstrap-tpls-0.6.0.min.js')
    ...(skip)

body(ng-app="appName")
    div(ng-controller="controllerName")
        div(class="parent")
            span(class="dropdown")
                span(class="dropdown-toggle") EBOOKS
                ul(class='dropdown-menu')
                    li(ng-repeat='item in ebook')
                        a(href="{{item.url}}", target="blank") {{item.title}}

page.js

angular.module('page', ['ui.bootstrap']);
function controllerName($scope) {
    $scope.ebook = [{
        title: 'Link to Google',
        url: 'http://www.google.com/'
    },
    {   title: 'Link to Bing',
        url: 'http://www.bing.com/'
    },
    {
        title: 'A long title testing is being done here lalalala',
        url: 'http://duckduckgo.com'
    }];
}                

I've spent so much time on this but can't seem to make any breakthrough. Please help.

1 Answer 1

1

Your jade does not include the ui-bootstrap CSS file. In this plunker example from the ui-bootstrap page you'll see they use this CSS from a CDN:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

I suspect that probably translates to something like

link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css', rel='stylesheet')

in jade

Sign up to request clarification or add additional context in comments.

2 Comments

Please change "style" to "link". Correct is : link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css', rel='stylesheet')
Thanks for noticing that @PanosAngelopoulos

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.