CODEWITHSUNDEEP
javascriptangularjsangular-strap
Ramya
Ramya

Reputation: 284

AngularStrap bs-select does not show dropdown

I'm using AngularStrap in my project. I want a multiple selection component, and I'm using it like in this Fiddle I created. But I'm not able to see the dropdown. Am I missing something to trigger the dropdown? I tried different values for data-trigger attribute, but it doesn't seem to work anyway.

I'm using Angular 1.4. Updating my question with the same code in the above fiddle.

HTML:

<div ng-controller="MyController">
    <form>
        <label>Show in:&nbsp;</label>
        <button type="button" class="btn btn-default" 
            ng-model="selectedIcons" 
            data-html="true" data-multiple="1" 
            data-trigger="focus" data-animation="am-flip-x" 
            bs-options="icon.value as icon.label for icon in icons" 
            bs-select>
            Select Page(s) <span class="caret"></span>
        </button>
    </form>
</div>

Controller:

angular.module('MultiSelectModule', ['mgcrea.ngStrap'])
    .controller('MyController', function ($scope) {
        $scope.icons = '[{
            "value":"Option 1",
            "label":"<i class=\"fa fa-file-text\"></i> Option 1"
        }, {
            "value":"Option 2",
            "label":"<i class=\"fa fa-filter\"></i> Option 2"
        }, {
            "value":"Option 3",
            "label":"<i class=\"fa fa-clock-o\"></i> Option 3"
        }]';
        $scope.selectedIcons = '["Option 1", "Option 2"]';
    });

Thanks!

Upvotes: 2

Views: 3548

Answers (2)

James
James

Reputation: 1514

The fiddle is giving a console error because your module is not available. Make sure you are including all sources needed for this to run and you have it spelled correctly. You are also going to be missing the bootstrap css as well. I would review again all items needed for this to run.

This is the best I can do to show you what you are missing, made a plunker with the example code from their site.

http://plnkr.co/edit/80WaLp30ikmYeJqsbIKU?p=preview

Index.html 

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" />
    <script src="//cdn.jsdelivr.net/angularjs/1.4.2/angular.min.js" data-semver="1.4.2"></script>
    <script src="//cdn.jsdelivr.net/angularjs/1.4.2/angular-animate.min.js" data-semver="1.4.2"></script>
    <script src="//cdn.jsdelivr.net/angularjs/1.4.2/angular-sanitize.min.js" data-semver="1.4.2"></script>
    <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.1"></script>
    <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.1"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

<div class="bs-docs-section" ng-controller="SelectDemoCtrl">

  <div class="bs-example" style="padding-bottom: 24px;" append-source>

    <label>Single select:&nbsp;</label>
    <button type="button" class="btn btn-default" ng-model="selectedIcon" data-html="1" bs-options="icon.value as icon.label for icon in icons" bs-select>
      Action <span class="caret"></span>
    </button>
    <hr>
    <label>Multiple select:&nbsp;</label>
    <button type="button" class="btn btn-default" ng-model="selectedIcons" data-html="1" data-multiple="1" data-animation="am-flip-x" bs-options="icon.value as icon.label for icon in icons" bs-select>
      Action <span class="caret"></span>
    </button>
  </div>


</div>

  </body>

</html>

app.js

var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);

app.controller('MainCtrl', function($scope) {
});

'use strict';

angular.module('mgcrea.ngStrapDocs')

.controller('SelectDemoCtrl', function($scope, $http) {

  $scope.selectedIcon = '';
  $scope.selectedIcons = ['Globe', 'Heart'];
  $scope.icons = [
    {value: 'Gear', label: '<i class="fa fa-gear"></i> Gear'},
    {value: 'Globe', label: '<i class="fa fa-globe"></i> Globe'},
    {value: 'Heart', label: '<i class="fa fa-heart"></i> Heart'},
    {value: 'Camera', label: '<i class="fa fa-camera"></i> Camera'}
  ];

  $scope.selectedMonth = 0;
  $scope.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

});

Upvotes: 3

Mathias F
Mathias F

Reputation: 15931

You need to include angular in the fiddle.

enter image description here

Upvotes: 1

Related Questions