个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
30
4
我在我的项目中使用 AngularStrap。我想要一个 multiple selection component ，我正在使用它，就像在这个 Fiddle 中一样我创建。但是我看不到下拉菜单。我是否缺少触发下拉菜单的内容？我为 data-trigger 属性尝试了不同的值，但它似乎无论如何都不起作用。
我使用的是 Angular 1.4。使用上面 fiddle 中的相同代码更新我的问题。
HTML:
<div ng-controller="MyController">
<form>
<label>Show in: </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"]';
});
谢谢!
最佳答案
由于您的模块不可用， fiddle 给出了一个控制台错误。确保你包含了运行所需的所有源并且拼写正确。您也将丢失 bootstrap css。我会再次检查运行所需的所有项目。
这是我能做的最好的事情来告诉你你错过了什么，用他们网站上的示例代码做了一个 plunker。
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: </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: </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>
应用程序.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'];
});
关于javascript - AngularStrap bs-select 不显示下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31841958/
30
4
0
我正在使用 rails 来构建我的应用程序。试图用 angularstrap 弹出一个模态框 http://mgcrea.github.io/angular-strap/#/modal他们给出了使用带
我有一个使用 AngularJS、Bootstrap 3 和 AngularStrap 的网络应用程序。在这个应用程序中，我之前使用 Bootstrap UI 作为 Bootstrap 指令，但我需要
Plunker 我有一个显示属性列表的 ng-grid。我的每一行都有一个删除按钮。当我单击删除时，我想要一个模式，显示您确定吗？目前，您可以看到模式尝试显示，因为灰色透明 div 淡入页面，但是模式
我正在使用 AngularTrap 时间选择器，问题是我找不到制作 24 小时时间格式的方法。 最佳答案 发布问题后立即找到解决方案:只需添
我有这个 Angular 日期选择器 (目前我已经输入了硬编码的开始和结束日期只是为了测试功能。稍后我将输入 Angular 表达式) 现在，这部分 data-start-date="01/
我正在尝试使用 Angular Strap 库创建一个模式: http://plnkr.co/edit/fXOIAoYMpgzLK4xsvrxG?p=preview 当我运行它时，我得到空模态，并且
我正在尝试让 bs-tooltip AngularStrap 指令与我自己的名为“checkStrength”的自定义指令一起工作，该指令检查密码的强度。单独使用这些指令中的任何一个时，它们都可以正常
我正在尝试按照 AngularDart getting started guide 上的说明在我的元素中使用 AngularStrap 日期选择器。功能很好，但外观不佳。即使没有加载我自己的样式表，外
当我单击一个按钮时，它会出现一个弹出窗口，如果您单击弹出窗口内的按钮，则可以关闭该弹出窗口。但是，如果您单击另一个按钮打开一个弹出窗口，您将同时看到两个弹出窗口，而我只想保留一个。 我已经尝试过使用触
我正在尝试根据文档 http://mgcrea.github.io/angular-strap/#/popovers#tooltips 延迟 AngularStrap 的弹出窗口和下拉菜单 当延迟是一
我正在使用 AngularStrap typeahead，并且当用户选择某个项目时需要回调。根据documentation ，有一个 onSelect 选项，可以通过 function 提供，并且:
我对使用 Angular 和 AngularStrap 指令有点陌生。我需要将 tab 指令与静态标记一起使用，如下例所示: Static tab content A Static tab
我正在尝试重新创建可折叠的 Bootstrap responsive navbar使用 AngularStrap。 这里是 plunker :
我正在测试 Angular 带的模态窗口，但发生了一些不希望发生的事情。在大文档中，当模式可见时，浏览器滚动条消失。然后，当您关闭模式时，浏览器滚动条再次显示并且文档折叠了一下。 我看了一个小时的开发
我正在尝试用自定义指令包裹 Angular 带的弹出框。 弹出窗口应该能够使用由使用我的指令的人提供的自定义模板，并且该模板应该能够使用 Controller 的范围。 对于范围部分，我发现我可以将
我想知道是否可以在不保留用户区域设置的时区信息的情况下使用 AngularStrap 的日期选择器。在我们的应用程序中，我们希望处理具有到期日期的 Contract 对象。 添加或编辑契约(Contr
我想使用一个按钮来显示和隐藏日期选择器。 http://mgcrea.github.io/angular-strap/##datepickers 没有关于如何执行此操作的文档 var app = an
我正在跟随这个笨蛋在我的项目中创建一个预输入。 http://plnkr.co/edit/ZjpJxXkl0v5LhQdxcqWn?p=preview app.js(不适用于我的 API) $scop
我目前正在使用 Twitter Bootstrap 开发 AngularJS 项目，并尝试将我的 Bootstrap 指令转换为 Angular。我决定使用 AngularStrap，因为它提供了对
我在我的项目中使用 AngularStrap。我想要一个 multiple selection component ，我正在使用它，就像在这个 Fiddle 中一样我创建。但是我看不到下拉菜单。我是否
我是一名优秀的程序员,十分优秀！