How to fix - Dropdown in AngularJS

Question

I'm trying to implement ''Dropdown'' with filter(search) in AngularJS. While trying i'm not getting as 'dropdown' select menu. The following images show before and after search in dropdown.

A text inbox like structuring is appearing while searching.

Please help me to fix this and where i'm going wrong.

Thanks in advance.

My code follows here:

<html>

<head>
    <title>Select with search</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" 
          href="node_modules/ui-select/dist/select.min.css" />
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/ui-select/dist/select.min.js"></script>
</head>

<body>
    <div ng-app="myApp" ng-controller="selectCtrl">{{1+1}}
        <ui-select ng-model="num.selected" theme='bootstrap'>

            <ui-select-match>
                {{$select.selected.name}}
            </ui-select-match>

            <ui-select-choices repeat='n in nums | filter: $select.search'>
                {{n.name}} ({{n.email}})

            </ui-select-choices>

        </ui-select>
    </div>

    <script>
        var app = angular.module("myApp", ['ui.select']);
        app.controller("selectCtrl", function($scope) {
            $scope.num = {};
            $scope.nums = [{
                    name: 'apple',
                    email: '[email protected]'
                },
                {
                    name: 'alfa',
                    email: '[email protected]'
                },
                {
                    name: 'bat',
                    email: '[email protected]'
                },
                {
                    name: 'cat',
                    email: '[email protected]'
                },
                {
                    name: 'dog',
                    email: '[email protected]'
                },
                {
                    name: 'monkey',
                    email: '[email protected]'
                }
            ];

        });
    </script>
</body>

</html>

Use the full development version of angularjs to get more verbose error output and tell us what module name is not found. Or follow the generated link in error to the error.docs page that gives you an explanation — charlietfl
– charlietfl, Commented Feb 4, 2019 at 11:22
@charlietfl Error is solved. Could you help to solve this dropdown.Thanks — Ramlal S
– Ramlal S, Commented Feb 4, 2019 at 11:47

leo · Accepted Answer · 2019-02-04 14:55:33Z

1

seems like a css error, check your css classes are actually loaded

It might be because you are missing the rel and type

< link rel="stylesheet" type="text/css" href="mystyle.css">

check out https://www.w3schools.com/css/css_howto.asp

answered Feb 4, 2019 at 14:55

leo

2762 silver badges7 bronze badges

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

2 Comments

Ramlal S Over a year ago

CSS is working fine.Could you check with logical code.Thanks for ur effort

leo Over a year ago

Check out this fiddle: jsfiddle.net/nfew1kgs/3 None of the code was changed, but I've added cdns for ui-select and bootstrap

Collectives™ on Stack Overflow

How to fix - Dropdown in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related