当前位置: 首页 > 面试题库 >

在angularjs中使用bootstrap崩溃

孔阎宝
2023-03-14
问题内容

我正在尝试在我的角度应用程序中包括以下Bootstrap可折叠面板。但是,当我单击“展开”时,似乎可以看到角度href="#collapseOne",然后将其重定向到主页,而不是折叠面板。我的路由看起来像这样,我认为otherwise({redirectTo:'/home'});是引起问题的原因。有什么建议?

angular.module('App')
.config(['$routeProvider', function($routeProvider) { 
$routeProvider.
  when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UserCtrl'}).
  when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}).
  when('/users/:userid', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}).


  otherwise({redirectTo: '/home'});
}]);

面板-

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
  </div>

问题答案:

作为一个类似的问题mentionned,简单地由数据目标属性改变您的href

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
</div>


 类似资料:
  • 问题内容: 我想在AngularJS中使用Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap- multiselect/ 。我听说有必要将其移至“指令”。但是我认为这很复杂,我不知道该怎么办。如果您有经验,请指导我!Tks。 问题答案: 如果您不需要创建非常可重用的代码,则实际上并不那么复杂。第一步是创建一个基本

  • 本文向大家介绍Angularjs中的ui-bootstrap的使用教程,包括了Angularjs中的ui-bootstrap的使用教程的使用技巧和注意事项,需要的朋友参考一下 1.新建uiBootstrap.html页面,引入依赖的js和css类库 2.新建uiBootstrap.js文件,定义一个uiModule 模块,引入依赖的模块 3.定义dialog弹出窗口的模板 4.定义一个 UiCon

  • 问题内容: 使用此处提到的示例,如何使用JavaScript而不是单击按钮来调用模式窗口? 我是AngularJS的新手,并尝试在这里和这里搜索文档,但是没有运气。 谢谢 问题答案: 好的,因此,首先http://angular-ui.github.io/bootstrap/有一个指令和服务,这两个指令都可以用来打开模式窗口。 与众不同的是,使用模式的指令内容嵌入在宿主模板中(一个触发模式窗口打开

  • 主要内容:Bootstrap,HTML 代码,指令解析,Bootstrap 类解析,JavaScript 代码,myUsers.js,JavaScript 代码解析AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。 查看 Bootstrap教程。 Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link re

  • 包含了一套Bootstrap的HTML和CSS标签的AngularJS指令。因此不依赖jQuery或Bootstrap的JavaScript文件。唯一需要的依赖关系:  AngularJS(最低版本1.0.8)  Bootstrap的CSS(3.0.3测试通过)。最新的版本(0.10.0)只支持Bootstrap3.x的CSS( 0.8.0是最后一个支持Bootstrap2.3.x的版本)。

  • 问题内容: 我在Reactjs中使用纯Bootstrap,并且已经使用Bootstrap组件构建了一个navBar,但是我面临的问题是数据切换折叠不起作用。 当我缩小显示视图的大小时,将显示汉堡图标,但是当我单击它时,则什么也没有发生。虽然它可以与纯HTML和JS完美配合,但不能与reactjs配合使用。 这是index.js文件 这是app.js 这是NavBar.js文件 这是我用于navBa