Question

我在我的项目中使用AngularStrap。我想要一个multiple selection component，我就像在我创建的Fiddle中一样使用它。但是我无法看到下拉列表。我错过了触发下拉菜单的内容吗？我为data-trigger属性尝试了不同的值，但它似乎无论如何都不起作用。

我正在使用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"]';
    });

谢谢！

Answer 1

由于您的模块不可用，因此提供控制台错误。确保包含运行所需的所有源，并且拼写正确。你也将失去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'];

});

Answer 2

你需要在小提琴中加入角度。

AngularStrap bs-select不显示下拉列表

2 个答案: