天道酬勤,学无止境

angular JS 中的 Bootstrap 下拉列表问题(Bootstrap Dropdownlist Issue in angular JS)

问题

我试图在引导下拉菜单中使用 ng-repeat,但它没有在下拉菜单中显示元素列表。 我在从控制器中定义的方法填充下拉列表的元素时遗漏了什么吗?

<button type="button" class="btn btn-default btn-sm" title="Results Per Page">
  <span class="dropdown" dropdown>
     <a href class="dropdown-toggle" dropdown-toggle>
       <span class="caret"></span>
      {{Temp.obj.pageSize}} Results Per Page </a>     
          <ul class="dropdown-menu">
            <li data-ng-repeat="result in Temp.obj.availPages">
            <a href data-ng-click="Temp.obj.setSize(result)">                            
                 {{result}}</a>
            </li>
           </ul>
    </span>
</button>
回答1

您很容易缺少ul列表中的dropdown-menu指令。

提醒一下,这是 angular-ui bootstrap 文档中的(简化)示例。

<div class="btn-group" uib-dropdown>
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem"><a href="#">Action</a></li>
    <li role="menuitem"><a href="#">Another action</a></li>
  </ul>
</div>

当指令没有以uib-为前缀时,您似乎使用的是旧版本的 angular-ui bootstrap。 如果可以,我建议更新您的版本。 否则,只需从示例中删除前缀。

编辑:当您使用 angular-ui bootstrap 的 1.1.2 版时,您需要为指令添加前缀,如本答案所示。 这是供参考的文档

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 当下拉列表中的下拉列表触发选定的索引更改事件时,Bootstrap 模式关闭(Bootstrap modal closes when dropdownlist inside fires selected index changed event)
    问题 我在 Bootstrap 模式中有一个 ASP.NET 图表。 一切正常,直到我在里面添加了一个下拉列表,每次我在下拉列表中选择一个新项目时,选定的项目更改事件都会触发,并且 Boostrap 模式关闭,如果事件中没有代码,则为事件。 这是模态引导程序 html: <div class="modal fade" id="modalCantidadReservasMensuales" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel"> Cantidad reservas mensuaCantidad reservas mensuales </h4> </div>
  • 如何将 Bootstrap 下拉样式应用于 ASP.NET MVC DropDownList?(How to apply Bootstrap dropdown style to an ASP.NET MVC DropDownList?)
    问题 给定的是以下 MVC razor 代码,它从列表中创建一个下拉列表: @Html.DropDownList("MyTestList", null, new { @class = "btn btn-default dropdown-toggle" }) 这将创建以下下拉列表: 使用 getbootstrap.com 中的代码时: <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">test1</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">test2</a></li> </ul> </div> 它将显示如下下拉列表:
  • 处理在容器上自动溢出的 twitter bootstrap 下拉剪切问题(Handle twitter bootstrap dropdown clipped issue having overflow auto on container)
    问题 Bootstrap 下拉列表被剪裁,我查看了以下问题中提到的所有选项,但没有用。 Bootstrap 下拉切断 Twitter Bootstrap Button 下拉 z-index 分层问题 twitter bootstrap 下拉菜单的 z-index 问题 要求 我想在主 div 中滚动我希望引导下拉菜单不被剪裁不应更改 div 和下拉列表的高度宽度 Plunker: http ://plnkr.co/edit/HOKKYJ?p=preview <!DOCTYPE html> <html> <head> <title>Clipping problem</title> <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" /> <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  • DropDownList 引导程序样式(DropDownList bootstrap styling)
    问题 我是 ASP.NET 的新手,一直在学习 asp.net 站点上的 ASP.NET MVC 5 入门教程。 我遇到了一个问题,我似乎无法使用引导程序设置下拉框的样式。 我目前正在使用下面的代码,该代码可以在标准下拉列表中显示它,但我不确定如何使样式起作用。 旧代码: Genre: @Html.DropDownList("movieGenre", "All") 编辑: @Paul 找到了解决方案: @Html.DropDownList("movieGenre", (SelectList)ViewBag.movieGenre, "Select genre", new { @class = "form-control" }) 谢谢大家的帮助。 回答1 您需要应用 CSS 类form-control 。 试试这个: @Html.DropDownList("movieGenre", "All", new { @class = "form-control"}) 也可以尝试DropDownListFor ,但必须显式设置模型属性: @Html.DropDownListFor(model => model.MovieGenreModel, SelectList, new { @class = "form-control"}) 感谢@Paul 的更正。 您可能需要按如下方式扩展现有的 HTML
  • Bootstrap Dropdownlist Issue in angular JS
    I am trying to use ng-repeat in bootstrap dropdown menu, but it does not display the list of elements in drop down. am i missing anything in populating the elements of drop down list from a method defined in controller. <button type="button" class="btn btn-default btn-sm" title="Results Per Page"> <span class="dropdown" dropdown> <a href class="dropdown-toggle" dropdown-toggle> <span class="caret"></span> {{Temp.obj.pageSize}} Results Per Page </a> <ul class="dropdown-menu"> <li data-ng-repeat="result in Temp.obj.availPages"> <a href data-ng-click="Temp.obj.setSize(result)"> {{result}}</a> <
  • 避免双击以切换Bootstrap下拉菜单(Avoid having to double-click to toggle Bootstrap dropdown)
    问题 我正在使用Bootstrap下拉菜单。 问题在于它从不会在第一次单击时下降。 我需要单击2次才能切换。 我猜想click事件在传播之前就被卡在了某处... 有什么办法可以解决这个问题? 回答1 如果有人使用ui-bootstrap模块的angular以及常规的bootstrap HTML下拉列表定义,则还需要单击两次。 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> [...] </li> =>删除data-toggle="dropdown"将解决此问题。 一键打开下拉菜单将在此之后起作用。 参考:https://github.com/angular-ui/bootstrap/issues/2294 回答2 在Bootstrap 4中, bootstrap.min.js和bootstrap.bundle.min.js现在在下拉菜单中发生冲突。 通过删除bootstrap.min.js ,下拉双击问题将得到解决。 回答3 如果您的项目中两次包含Bootstrap,则可能会发生这种情况。 如果bootstrap.min.js和bootstrap.bundle.min.js(bootstrap和popper js)都包含在项目中
  • AngularJS Bootstrap下拉列表不起作用(Angularjs bootstrap dropdown not working)
    问题 angularjs和bootstrap有点新。 我正在尝试添加一个简单的下拉菜单。 但这是行不通的。 尝试了建议@ Bootstrap 3简单的下拉列表不起作用。 那也行不通。 <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" ui-sref="a">a<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a ui-sref="a">a</a></li> <li><a ui-sref="b">b</a></li> <li><a ui-sref="c">c</a></li> <li><a ui-sref="d">d</a></li> <li><a ui-sref="e">e</a></li> <li><a ui-sref="f">f</a></li> <li><a ui-sref="g">g</a></li> <li><a ui-sref="h">h</a></li> <li><a ui-sref="i">i</a></li> <li><a ui-sref="j">j</a></li> <li><a ui-sref="k">k</a></li> </ul> </li> 完整代码@ http://plnkr.co
  • Angular 2 下拉菜单中的 bootstrap 4 不起作用(bootstrap 4 in Angular 2 dropdown not working)
    问题 我按照以下步骤将 bootstrap 4 安装到我的 Angular 2 项目中:接受的答案,遵循前 1、2、3 和 4 个步骤 但是,当我将以下HTML添加到我的标题组件时: <nav class="navbar-dark bg-inverse"> <div class="container"> <a href="#" class="navbar-brand"></a> <ul class="nav navbar-nav float-xs-right"> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" id="nav-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SomeEmail@hotmail.com</a> <div class="dropdown-menu" aria-labelledby="nav-dropdown"> <a href="#" class="dropdown-item">Sign Out</a> </div> </li> </ul> </div> 正如您基本上可以看到它的下拉菜单,当我单击下拉菜单时,页面会刷新,而不是显示“退出”选项。
  • Bootstrap下拉菜单不起作用(Bootstrap Dropdown menu is not working)
    问题 我无法正常使用下拉菜单。 我可以使导航栏完美显示,但是当我单击“ Dropdown”(它们中的任何一个)时,它不会显示下拉菜单。 我曾尝试查看有关此问题的其他文章,但是没有什么能解决每个人的问题。 我直接从bootstrap网站复制了源代码,但似乎无法在我的机器上使用它。 有人有想法么? 我盯着它看了一个小时,似乎无法弄清楚问题出在哪里。 <head> <script src="resource/js/jquery-1.11.0.js"></script> <script src="resources/js/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function() { $('dropdown-toggle').dropdown() }); </script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type=
  • Angular JS-自动聚焦输入并显示typeahead下拉菜单-ui.bootstrap.typeahead(Angular JS - Automatically focus input and show typeahead dropdown - ui.bootstrap.typeahead)
    问题 我正在使用Angular JS-ui.bootstrap.typeahead: 我想单击一个按钮,然后将焦点放在输入字段上,然后自动显示预输入建议下拉列表。 我有一条指令,当单击按钮时,该指令会自动聚焦输入字段。 如何自动显示下拉菜单,以便用户可以使用向下箭头或单击来快速选择用户? 我用可编辑的ui-bootstrap JS文件创建了一个Plunker: http://plnkr.co/edit/Z79LY0OYlwFc3wirjxol?p=preview 这是我的完整脚本: <!doctype html> <html ng-app="plunker"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script> <script src="ui-bootstrap-tpls-0.10.0.js"></script> </head> <body> <script> angular.module('plunker', ['ui.bootstrap']) .directive(
  • 如何在 Bootstrap 中将单个下拉菜单附加到正文(How to append a single dropdown menu to body in Bootstrap)
    问题 我已经看到下拉菜单的文档作为组件并单独使用 javascript。 我想知道是否可以在网站正文中添加一个下拉菜单(相对于可点击按钮元素的绝对定位)。 为什么? 因为如果我有一个包含 500 行的表,我不想将 10 个项目的相同列表添加 500 次,从而在处理 JS 时使生成的 HTML 变得更大更慢。 因为可以隐藏父元素,但我仍然希望下拉菜单可见,直到他们在它外面单击以取消聚焦。 我发现更多人要求使用此功能,但我在文档中找不到任何相关内容。 回答1 正如引导文件所说,下拉菜单没有选项......这很可悲,但这意味着目前没有您想要的功能的“引导”解决方案。 但是,如果您正在使用Angular-UI/Bootstrap套件,现在有一个解决方案。 您引用的工单已关闭,因为它最终于 2015 年 7 月 15 日添加到 Angular-UI 中。 您所要做的就是“将 dropdown-append-to-body 添加到下拉元素以附加到正文的内部下拉菜单。 当下拉按钮位于带有溢出:隐藏的 div 内时,这很有用,否则菜单将被隐藏。 (参考) <div class="btn-group" dropdown dropdown-append-to-body> <button type="button" class="btn btn-primary dropdown-toggle"
  • 使用 bootstrap v3 为 asp.net 下拉列表控件添加样式(Adding style for asp.net drop-down list control using bootstrap v3)
    问题 我试图使用 bootstrap 3 为 asp.net 下拉列表控件添加样式。但它不适用。 早些时候它与 bootstrap 2.3.2 一起工作,没有任何变化。 任何人都可以建议我这样做的方法。 非常感谢。 回答1 我会说这就足够了: <asp:DropDownList runat="server" CssClass="form-control" ID="something" /> 查看 bootstrap 文档并向下滚动到Selects部分。 回答2 您可以使用它并根据需要更改 btn: <asp:DropDownList Width="100%" CssClass="btn btn-default btn-sm" ID="DPCID" runat="server"/>
  • 预先输入控件的向上/向下箭头键问题(角度引导UI)(up/down arrow key issue with typeahead control (angular bootstrap UI))
    问题 勾选此PLNKR,我已在类型中实现预输入控制,默认情况下,提前控制,他们不设置任何最大高度或高度名单,但按规定我必须列出的修复高度110px。 因此,当我们一次有更长的列表时,将仅显示4个数据,而向下滚动则可以看到其余数据。 当用户单击向上/向下滚动箭头时,滚动功能有效,但不适用于键盘上/下键。 该问题的解释步骤如下: 输入一些东西,例如“ a”以提前输入数据(将填充列表) 按向下箭头键(焦点将在列表项上) 按向下箭头键4-5次以进一步向下移动(当我们向下移动到列表时,滚动不会移动。) 它始终显示列表中的前4个项目。 理想的行为是它应该转变。 用户可以通过手动单击滚动来滚动,但是使用箭头键不会滚动。 的HTML <!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script> <script src="example.js"></script> <link href="//netdna
  • Angular 2 - 带有 formControlName 的 ng-bootstrap 下拉菜单(Angular 2 - ng-bootstrap dropdown with formControlName)
    问题 有没有办法让 ng-bootstrap 下拉控件与 Angular 的反应形式一起工作? 鉴于: <div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button> <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> <button class="dropdown-item">Action - 1</button> <button class="dropdown-item">Another Action</button> <button class="dropdown-item">Something else is here</button> </div> </div> 如何使用 formControlName 就像在输入上使用一样? <input formControlName="name" /> 回答1 不幸的是, ng-bootstrap下拉菜单不能用作开箱即用的表单控件。 但是可以创建您自己的组件来用作表单控件。 为此,您需要实现ControlValueAccessor接口。
  • 从数据库中的表生成下拉列表(generate dropdownlist from a table in database)
    问题 我试图更精确地回答我之前的问题,可以在这里找到,我得到了一些不错的答案,但不知道如何在我的情况下使用它上一个问题我得到了一些不错的答案,但不知道如何使用在我的情况下使用它。 基本上我想要注册页面,其中包含 Email //来自我的 AspNetUser(datamodel) 类,数据库中也存在 AspNetUsers 表。 UserName //来自我的 AspNetUser(datamodel) 类,数据库中也存在 AspNetUsers 表。 Password //来自我的 AspNetUser(datamodel) 类,数据库中也存在 AspNetUsers 表。 Role //下拉列表,来自Role(datamodel)类,数据库中也存在Roles表 在我的控制器中,我通过以下方式实现了我的Register方法: public class AccountController : Controller { //private readonly IDbContext dbContext; // // GET: /Account/ [HttpGet] public ActionResult Login() { return View(); } [HttpPost] [AllowAnonymous] public ActionResult Login(LoginModel
  • Bootstrap下拉列表被溢出:隐藏容器,如何更改容器?(Bootstrap dropdown clipped by overflow:hidden container, how to change the container?)
    问题 使用自举,我有一个内部的下拉菜单(S) div与overflow:hidden ,这是需要这样。 这导致下拉菜单被容器裁剪。 我的问题是,如何解决这个裁剪问题,例如将项目内所有下拉菜单的容器更改为body ,并尽可能降低成本? 这是代码示例:http://jsfiddle.net/0y3rk8xz/ 回答1 如果对此解决方法感兴趣的用户,则引导程序下拉列表中有show.bs.dropdown事件,您可以使用该事件将dropdown元素移到overflow:hidden容器之外。 $('.dropdown').on('show.bs.dropdown', function() { $('body').append($('.dropdown').css({ position: 'absolute', left: $('.dropdown').offset().left, top: $('.dropdown').offset().top }).detach()); }); 如果您希望在关闭下拉菜单后将元素移回其所属位置,则还会发生hidden.bs.dropdown事件: $('.dropdown').on('hidden.bs.dropdown', function() { $('.bs-example').append($('.dropdown').css({ position
  • 响应式下拉导航栏,带有angular-ui引导程序(以正确的角度方式完成)(Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way))
    问题 我使用angular-ui-boostrap的模块“ ui.bootstrap.dropdownToggle”创建了带有下拉导航栏的JSFiddle: http : //jsfiddle.net/mhu23/2pmz5/ <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#"> My Responsive NavBar </a> <ul class="nav"> <li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle"> Menu 1 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#/list">Entry 1</a> </li> <li><a href="#/list">Entry 2</a> </li> </ul> </li> .... </ul> </div> </div> </div> 据我了解,这是实施此类下拉菜单的正确方法。 就angularjs而言,“错误
  • Twitter Bootstrap下拉突然不起作用(twitter bootstrap drop down suddenly not working)
    问题 我想知道是否有人可以帮助我。 我的引导程序下拉菜单突然停止工作。 我不知道为什么。 它曾经在工作。 我没有触摸我的视图,也不是布局视图,所以我认为问题不存在。 我很确定这和我的javascript有关,但是我不知道它从哪里来。 我的宝石文件是... gem 'rails', '3.2.3' gem 'bootstrap-sass', '2.0.1' gem 'bcrypt-ruby', '3.0.1' gem 'faker', '1.0.1' gem 'will_paginate', '3.0.3' gem 'bootstrap-will_paginate', '0.0.5' gem 'devise' gem 'carrierwave' gem 'rmagick' gem 'delayed_job_active_record' gem 'daemons' gem 'make_voteable' gem 'admin_data' gem 'indextank' 而我的application.js是... //= require jquery //= require jquery-ui //= require jquery_ujs //= require bootstrap-dropdown //= require bootstrap //= require_tree
  • 如何以编程方式打开Bootstrap下拉菜单(How to open Bootstrap dropdown programmatically)
    问题 单击另一个下拉菜单项时,我正在尝试打开Bootstrap下拉菜单。 想法是从第一个下拉列表中选择一个城市-然后脚本将自动打开第二个下拉列表及其区域(并仅显示与所选城市相对应的区域)。 这是我的JS: $('#sidebar_filter_city li').click(function(){ $('#sidebar_filter_areas').dropdown('toggle'); }); 这是HTML: <div class="dropdown form-control"> <div data-toggle="dropdown" id="sidebar_filter_cities" class="sidebar_filter_menu" data-value="jersey-city">Jersey City<span class="caret caret_sidebar"></span></div> <input type="hidden" name="advanced_city" value="jersey-city"> <ul id="sidebar_filter_city" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_cities"> <li role=
  • Twitter Bootstrap 手风琴和按钮下拉溢出问题(Twitter Bootstrap Accordion and button dropdown overflow issue)
    问题 我正在将 Bootstrap 用于我网站的一部分。 我将手风琴与下拉按钮混合在一起。 当按钮位于底部时,问题就出现了,因为 .accordion-body 溢出设置为隐藏,下拉菜单被隐藏。 您可以在此处查看 jsfiddle:http://jsfiddle.net/DBQU7/6/ 所以我做了你所期望的,试图做overflow-y:visible 。 但是随后您可以在此处看到结果,它不起作用:(您可能还会注意到下拉列表在 div 内,它在 div 内创建了一个滚动条,而不仅仅是显示。 http://jsfiddle.net/DBQU7/5/ 我看到了这个类似的问题:Twiiter Bootstrap (Button Dropdown) + Div Fixed 但它并没有解决我上面提到的问题。 所以问题是,我怎样才能让下拉菜单正常显示。 谢谢。 到目前为止我发现的唯一解决方案(我很高兴被证明是错误的)是添加一个 CSS 属性,使溢出在打开时可见,然后通过 JS 脚本使其在可见和隐藏之间切换......不理想,但到目前为止没有更好的。 -- 编辑 -- 它实际上效果不佳,似乎不是一个可行的解决方案。 回答1 创见 你非常接近你的解决方案。 就是这个: .accordion-body.in { overflow:visible; } .in类在打开时添加,因此仅在打开时设置可见性。