AngularStrap bs-select не показывает выпадающее меню

Я использую AngularStrap в своем проекте. Я хочу multiple selection component, и я использую его, как в этом Fiddle, который я создал. Но я не могу видеть выпадающее меню. Я что-то упустил, чтобы вызвать раскрывающийся список? Я пробовал разные значения для атрибута data-trigger, но, похоже, он не работает.AngularStrap bs-select не показывает выпадающее меню

Я использую Angular 1.4. Обновление моего вопроса с помощью того же кода в приведенной выше скрипте.

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>

Контроллер:

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"]'; 
    });

Спасибо!

источник

2015-08-05 Ramya

Скрипка дает консольную ошибку, потому что ваш модуль недоступен. Убедитесь, что вы включили все источники, необходимые для запуска, и вы правильно его произнесли. Кроме того, вы также будете пропускать bootstrap css. Я бы снова просмотрел все необходимые для этого элементы.

Это лучшее, что я могу сделать, чтобы показать вам, чего вам не хватает, сделал плункер с примером кода со своего сайта.

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']; 

});

источник

2015-08-05 20:17:52 James

Спасибо, @James. Если вы заметили мой код, я действительно извлек свой код из своего образца кода. Теперь я обновил свой Fiddle [link] (http://jsfiddle.net/aymar/rttfd22t/23/), в том числе 'ngAnimate' и' ngSanitize', но я все еще получаю ошибку инжектора. Благодаря! – Ramya

На данный момент я думаю, что это просто проблема JSFiddle, все выглядит правильно, и когда я копирую свой код локально, он отлично работает. – James

Джеймс, спасибо, что указал на это. :-) Я могу заставить его работать на моем местном. Благодаря! – Ramya

Вам необходимо включить угловой в скрипку.

источник

2015-08-05 20:26:09

Я включил угловой в «Рамки и расширения». В любом случае, теперь я добавил угловые внешние ресурсы. Кажется, он пока не работает, и я не думаю, что мне нужно что-то еще включить. – Ramya

AngularStrap bs-select не показывает выпадающее меню

ответ

Смежные вопросы