Question

将BootstrapJS和AngularJS结合使用以及为什么不用jQuery

Answer 1

为此，下一步就是要拿到UI Bootstrap的文件，放到我们的项目中。那么我们能够在我们的Angular模块中导入ui.bootstrap。就这样，我们就能够获取需要模仿BootstrapJS组件的指令（directives ）！
// 创建 angular app 导入 ui.bootstrapangular.module('app', ['ui.bootstrap']).controller('mainController', function($scope) { // BUTTONS ====================== // 设置数据 $scope.bigData = {}; $scope.bigData.breakfast = false; $scope.bigData.lunch = false; $scope.bigData.dinner = false; // COLLAPSE ===================== $scope.isCollapsed = false; });

现在，正确的使用方式是，当按下按钮时调整这些变量的值。
使用UI Bootstrap按钮指令(Directive)
通过UI Bootstrap文档 ，使用复选框按钮正确的方法是添加 ng-model 的定义对象，并添加 btn-checkbox 属性。下面是我们按钮的代码：
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox> Breakfast </label> <label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox> Lunch </label> <label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox> Dinner </label></div>

现在，当我们点击按钮时，我们可以看到该模型的变化，就像我们希望的那样。
使用UI Bootstrap折叠指令
对于折叠，我们将基于isCollapsed变量的值打开和关闭面板。因此，我们将使用 ng-click="isCollapsed=!isCollapsed"。这将触发我们的isCollapsed变量从而切换面板。
<div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#" ng-click="isCollapsed = !isCollapsed"> Collapsible Group Item #1 </a> </h4> </div> <div collapse="isCollapsed"> <div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div></div>

Answer 2

应该是jquery操作的是dom。，这是区别吧

Answer 3

萝卜青菜各有所爱