Configure AngularJS Dropdown Multiselect

Dear Expert,

I want to do Dropdown Multiselect, I found the link below is using bootstrap with AngularJS and I prefer Dropdown Multiselect with Enable Search.
http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

The code they provide is like below:
// HTML
<div ng-dropdown-multiselect="" options="example9data" selected-model="example9model" extra-settings="example9settings"></div>

// JavaScript 
$scope.example9model = []; $scope.example9data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}]; $scope.example9settings = {enableSearch: true};

Open in new window


I had take it my html like below but not working:
<!DOCTYPE html>
<html>
    <head>
        <title>bootstrap datepicker examples</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script type="text/javascript" src="js/angularjs-dropdown-multiselect.js"></script>
           </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <div ng-dropdown-multiselect="" options="example9data" selected-model="example9model" extra-settings="example9settings">
            </div>
        </div>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function ($scope) {
                $scope.example9model = [];
                $scope.example9data = [{id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}];
                $scope.example9settings = {enableSearch: true};
            });
        </script>
    </body>
</html>

Open in new window


Could you tell me what is wrong?

Thanks,
arkam chouAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
What is AngularJS Dropdown Multiselect?
This directive uses Bootstrap's Dropdown with the power of AngularJS directives and binding.

here their app declaration, see in bold :

angular.module('exampleApp', [
    'ngRoute',
    'angularjs-dropdown-multiselect',
    'hljs',
      'ui.bootstrap'
]).

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
 <script type="text/javascript" src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/src/angularjs-dropdown-multiselect.js"></script>

Open in new window

0
arkam chouAuthor Commented:
I don't know about AngularJS before. I search and see it is good and put title "AngularJS Dropdown Multiselect". I want to make like their example "enable Search" but It not work. could you help to check?
0
leakim971PluritechnicianCommented:
did you understood my answer?

you need to add at least two more files to your current page :
angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js
angularjs-dropdown-multiselect.js

the first one is : https://angular-ui.github.io/bootstrap/
the second one is the code for the plugin itself
when you use a "plugin" in angular world you add the module when you declare you application :
angular.module('myApp', [ HERE AN ARRAY OF ALL "PLUGINS" YOU USE IN YOUR APPLICATION THIRD PARTIES OR NOT ]
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

arkam chouAuthor Commented:
I had it already but it still not work. sorry about understand less in English.
<!DOCTYPE html>
<html>
    <head>
        <title>bootstrap datepicker examples</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="ui-bootstrap-tpls-0.13.0.min.js"></script>
        <!--<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>-->
        <script type="text/javascript" src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/src/angularjs-dropdown-multiselect.js"></script>        
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <div ng-dropdown-multiselect="" options="example9data" selected-model="example9model" extra-settings="example9settings">
            </div>
        </div>
        <script>
            var app = angular.module('myApp', ['ngRoute',
                'angularjs-dropdown-multiselect',
                'hljs',
                'ui.bootstrap']);
            app.controller('myCtrl', function ($scope) {
                $scope.example9model = [];
                $scope.example9data = [{id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}];
                $scope.example9settings = {enableSearch: true};
            });
        </script>
    </body>
</html>

Open in new window

0
Ioannis ParaskevopoulosCommented:
Hi,

It seems that the site you posted is not telling the whole story. If you click on the top right corner button saying "View Project On GitHub", you will see some more details on what is missing from your code:

1. Download the files

2. Include lodash.js in your project.

<script type="text/javascript" src="lodash.js"></script>

3. Include the file in your app

<script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>
You can also use the minfined version (angularjs-dropdown-multiselect.min.js)

4. Include the module in angular (i.e. in app.js) - angularjs-dropdown-multiselect


Apparently you are missing "Step 2".

I have also noticed that you have included ng-route and hljs in the dependencies, but you are not loading the needed files. I just guess you omitted the files for brevity, but if you did not, you should also include them.

Giannis
0
arkam chouAuthor Commented:
Hi,

I put Lodash ,delete ng-route and hljs but it still not see anything in the page.
<!DOCTYPE html>
<html>
    <head>
        <title>bootstrap datepicker examples</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="ui-bootstrap-tpls-0.13.0.min.js"></script>
        <!--<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>-->
        <script type="text/javascript" src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/src/angularjs-dropdown-multiselect.js"></script>        
        <script type="text/javascript" src="https://raw.githubusercontent.com/lodash/lodash/3.9.3/lodash.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <div ng-dropdown-multiselect="" options="example9data" selected-model="example9model" extra-settings="example9settings">
            </div>
        </div>
        <script>
            var app = angular.module('myApp', ['angularjs-dropdown-multiselect', 'ui.bootstrap']);
            app.controller('myCtrl', function ($scope) {
                $scope.example9model = [];
                $scope.example9data = [{id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}];
                $scope.example9settings = {enableSearch: true};
            });
        </script>
    </body>
</html>

Open in new window

0
Ioannis ParaskevopoulosCommented:
You have

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script> 

Open in new window


commended out. Either uncommend it, or remove ui.bootstrap from your dependencies.

You will also have to include bootstrap's css files if you want it to look boostrapy, but this is optional for you to see the functionality.

Giannis
0
arkam chouAuthor Commented:
Yeah! It work. it because of I load wrong location of Javascript.

<script src="ui-bootstrap-tpls-0.13.0.min.js"></script>

Open in new window


and it is also work when uncommend the javascript below
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>

Open in new window

0
Ioannis ParaskevopoulosCommented:
I do not think that you need this for the multiselect. You only need this if you are using any other components from bootstrap-ui. The documentation for the multiselect doesn't have bootstrap-ui as a dependency.
0
arkam chouAuthor Commented:
I need only Angjular Multi Select and I don't know too what bootstrap-ui do. so how to do when using only "MultiSelect with Search".
0
Ioannis ParaskevopoulosCommented:
The following should work:

<!DOCTYPE html>
<html>
    <head>
        <title>bootstrap datepicker examples</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script type="text/javascript" src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/src/angularjs-dropdown-multiselect.js"></script>        
        <script type="text/javascript" src="https://raw.githubusercontent.com/lodash/lodash/3.9.3/lodash.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <div ng-dropdown-multiselect="" options="example9data" selected-model="example9model" extra-settings="example9settings">
            </div>
        </div>
        <script>
            var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
            app.controller('myCtrl', function ($scope) {
                $scope.example9model = [];
                $scope.example9data = [{id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}];
                $scope.example9settings = {enableSearch: true};
            });
        </script>
    </body>
</html>

Open in new window


Note that for my test i added bootstrap.css from the cdn. If you do have it in the css folder as it is suggested from your code, then you are good to go.

Giannis
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
arkam chouAuthor Commented:
Yes. This one that I need.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.