一组基于Twitter Bootstrap标记和CSS的AngularJS指令
有没有办法拦截BootstapUI的$uibModal Dismissed事件？
我正在 Angular 中使用 Bootstrap UI (https://angular-ui.github.io/bootstrap/) 中的模态组件来渲染模态，并且在关闭时我希望能够重定向到另一个状态，或者至少哈...
使用 AngularUI Bootstrap Modal 的 AngularJS 中的范围问题
骗子：http://plnkr.co/edit/wURNg8ByPYbEuQSL4xwg 示例.js： angular.module('plunker', ['ui.bootstrap']); var ModalDemoCtrl = 函数 ($scope, $modal) { $scope.open = 函数 () { 变种
在uib-tab中添加带有active和ng-repeat的选项卡
所以我已经尝试解决这个问题有一段时间了，我看到了一篇与此类似的帖子，但没有得到答复，所以我会尝试发布此帖子，但用 plunkr 来作为示例。 所以问题是在加载时，我
AngularJS 和 UI-Bootstrap 选项卡，使用 ng-class 修改选项卡
我正在使用 AngularJS 和 UI-Bootstrap 开发一个带有 ui-tabs 的项目。 大致的布局是这样的： 我正在使用 AngularJS 和 UI-Bootstrap 开发一个带有 ui-tabs 的项目。 大致布局是这样的： <uib-tabset> <uib-tab ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled"> <!-- Repeated Content --> </uib-tab> </uib-tabset> sumByKey:'count'是一个过滤器，用于计算重复选项卡对象中'count'字段的总和。这会跟踪已回答的问题，tab.Questions.length 会计算选项卡中重复问题的数量。 我可以在选项卡名称中显示这两个选项，就像我在这里所做的那样，这是可行的，因此在每个选项卡中，选项卡名称都是名称：已回答的问题总数，即：“停车：5 个中的 1 个”。 我想做的是，当这些数字相等时，使用 ng-class 将“已完成”类添加到选项卡，并且该选项卡中的所有问题都已得到解答。 我可以在选项卡中添加一个 class='complete' ，这样就可以了，但是尝试使用 ng-class 根本不起作用，甚至 ng-class="complete" 也不起作用。 有办法做到这一点吗？ ng-class 可以与 uib-tabs 一起使用吗？是否有其他机制来计算表达式并修改选项卡上的类？ 恐怕您不能直接在ng-class上使用ui-tab。这里的问题是 ui-tab 的内容（和属性）被包含在 this 中。它有自己的ng-class，正在破坏你的。这是我设法找到/使用的唯一解决方法。 将 class 与 ng-class 一起使用，如下所示： <uib-tabset> <uib-tab class="{{complete}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled"> <!-- Repeated Content --> </uib-tab> </uib-tabset> 但请注意，complete必须是字符串才能正常工作。如果它是一个布尔值，你可能会有更好的运气： <uib-tabset> <uib-tab class="{{complete ? 'complete':''}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled"> <!-- Repeated Content --> </uib-tab> </uib-tabset> 如果您需要放置多个类，我会创建一个以字符串形式返回类的函数： <uib-tabset> <uib-tab class="{{isCompleted}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled"> <!-- Repeated Content --> </uib-tab> </uib-tabset> 在控制器中： $scope.isCompleted = function () { // some logic return 'complete done'; } 希望对您有所帮助。 非常感谢杰森墨菲！这让我头疼有一段时间了，这就像一个魅力！ 最终语法是这样的： class="{{ (tab.Questions|sumByKey:'count') == (tab.Questions.length) ? 'completed' : ''}}" 然后将这些添加到 CSS 中： li.completed a.ng-binding{ background-color: silver; } li.active.completed a.ng-binding{ background-color: silver; } 当该选项卡中的所有问题均已得到解答时，这会将整个选项卡的选项卡背景设置为银色。 li.completed 和 li.active.completed 涵盖当前选择选项卡 (.active) 的情况以及选项卡完成但不包括当前选项卡的情况。它们本来可以写成一条规则，但为了清晰起见，我将它们分开。 如上所述，我们不能使用 ng-class 来实现此目的，但 uib-tab 提供了一个 classes 属性，您可以为此使用。 如文档中所示。 https://angular-ui.github.io/bootstrap/#!#tabs 下面是一个工作示例，显示类可以动态更改。 var app = angular.module('example', ['ui.bootstrap']); app.controller('controller', ['$scope', function($scope) { var classOne = 'bg-success'; var classTwo = 'bg-danger'; $scope.swapClasses = function() { var tempHolder = classOne; classOne = classTwo; classTwo = tempHolder; } $scope.getClassOne = function() { return classOne; } $scope.getClassTwo = function() { return classTwo; } } ]); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.3/ui-bootstrap-tpls.js"></script> <body ng-app="example"> <div ng-controller="controller"> <div> <input type="checkbox" ng-click="swapClasses()" /> Swap Classes! </div> <br> <uib-tabset> <uib-tab heading='Tab One' classes="{{getClassOne()}}"> <div class="tab-container"> I am Tab One </div> </uib-tab> <uib-tab heading='Tab Two' classes="{{getClassTwo()}}"> <div class="tab-container"> I am Tab Two </div> </uib-tab> </uib-tabset> </div> </body>
选项卡 1 <div class="ui-tab-container"> <uib-tabset> <uib-tab heading="Region Wise" index="region" active="region_wise">Tab 1</uib-tab > <uib-tab heading="Branch Wise" index="branch" active="state_tab">Tab 2</uib-tab> <uib-tab heading="City Wise" index="city" active="city_tab">Tab 3</uib-tab> <uib-tab heading="Counter Wise" index="counter" active="counter_tab">Tab 4</uib-tab> </uib-tabset> </div> 没有显示任何选项卡，当我切换到引导选项卡集时，它们工作正常，但我无法在单击第一个选项卡上的按钮时从一个选项卡切换到另一个选项卡，即使我从内部将该选项卡的 active 属性设置为 true按钮的功能（点击时） “引导”：“~3.3.0” “角度引导”：“〜2.3.1” 预先感谢。 试试这个 <uib-tabset active="'region'"> <uib-tab heading="Region Wise" index="'region'" active="region_wise">Tab 1</uib-tab > <uib-tab heading="Branch Wise" index="'branch'" active="state_tab">Tab 2</uib-tab> <uib-tab heading="City Wise" index="'city'" active="city_tab">Tab 3</uib-tab> <uib-tab heading="Counter Wise" index="'counter'" active="counter_tab">Tab 4</uib-tab> </uib-tabset> 您忘记将 active 指令添加到 uib-tabset 并为其赋予值 active（默认：第一个选项卡的索引）- 选项卡的活动索引。将其设置为现有选项卡索引将使该选项卡处于活动状态。 此外，您还没有实例化 active 元素中的 uib-tab 值 标签索引。必须是唯一的数字或字符串。 所以它应该是这样的 index="'region'" （注意里面的单个撇号，索引需要一个表达式！）或者 index="1" 噗噗 据我了解，ui-tab内的指令active必须与模型中的某些布尔变量绑定。 <uib-tab ... active="boolean_variable_to_bind">...</uib-tab >
我无法使 Angular-UI 分页在模态上工作，并且没有收到任何错误。从没有模式的工作分页复制代码，但不再工作。 这是我的笨蛋： 我无法使 Angular-ui 分页在模态上工作，并且没有收到任何错误。从没有模式的工作分页中复制了代码，但不再工作了。 这是我的笨蛋： <a href="https://plnkr.co/edit/5JHKpdmLMVBFlmL22SGC?p=preview">Plunker</a> 这是我没有模态的起点： <a href="https://plnkr.co/edit/mQUSVxj3PWtZWL0tYD2z?p=preview">Plunker</a> 感谢您的帮助 我要进行手动寻呼，因为我在网上没有找到太多与此相关的信息。
我正在尝试让引导模式教程在我的 view.ejs 文件中工作。但 class="modal fade" 似乎引起了问题。如果我删除 class="modal fade"，模态将永久显示您...
我的包中有日期选择器插件，当我实现时，我可以看到日历。我怎样才能看到日历。 这是我尝试过的 我的包中有日期选择器插件，当我实现时，我可以看到日历。我怎样才能看到日历. 这是我尝试过的 <input type="text" class="form-control" [(ngModel)]="selectedToDate" [bsConfig]="{ dateInputFormat: 'DD-MMM-YYYY', }" [minDate]="selectedFromDate" [maxDate]="maxDate" name="toDate" bsDatepicker /> 我浏览过不同的论坛并遵循相同的方法，但没有帮助，请帮助我。 在 Angular 中安装 ng-bootstrap npm 我 ng-bootstrap datepicker.html <div class="input-group"> <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker" /> <button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button"></button> </div> 日期选择器.ts 从 '@angular/core' 导入 { Component } ； 从 '@ng-bootstrap/ng-bootstrap' 导入 { NgbAlertModule, NgbDatepickerModule, NgbDateStruct }; 从'@angular/forms'导入{FormsModule}； 从 '@angular/common' 导入 { JsonPipe }; @Component({ selector: 'ngbd-datepicker-popup', standalone: true, imports: [NgbDatepickerModule, NgbAlertModule, FormsModule, JsonPipe], templateUrl: './datepicker-popup.html', }) export class DatePicker { model: NgbDateStruct; }
我正在为我的一个项目使用 ui-tinymce (https://github.com/angular-ui/ui-tinymce)。通过演示工作（该指令没有太多文档）。 总的来说，一切都工作正常
Angular 和 ng-bootstrap - UI 问题
我是一名 UI 设计工程师，我的团队决定使用 Angular 构建我们的网站。 Bootstrap 是首选的 UI 框架，这是我们首次尝试 Angular。 我看到了 ng-boot...
Bootstrap-ui Modal 在 Angular-Gantt 中设置时显示为空白
我在尝试让我的模态出现时遇到困难。我不确定是因为模态与角度甘特图不兼容还是我的代码错误。此刻我看到一个更暗的屏幕......
有人可以解释一下如何在模式打开后替换模式中的内容吗？当特定的 websocket 事件被触发时，我将打开一个模式。 在那次活动之后，我得到了状态更新，我想要
我的问题很简单，我需要显示一个日历并让用户选择多个日期 - 例如2018 年 1 月 2 日、2018 年 1 月 3 日、2018 年 1 月 4 日。也就是说，不是一个范围，而是多个日期。 在 Angular 1.x 中，我使用了
升级到 Angular 17 bsdatepicker 输入后 [只读属性不起作用
我将我的项目升级到了 Angular 17，当检查只读属性未显示时，已经工作的引导日期选择器就绪属性不起作用。但在 htm 中，它被设置为只读...
如何将自定义属性从 `angular-ui-bootstrap` 传递到 `$modal`
有两次我必须打开这样的模式： $modal.open({ templateUrl: "components/prize-info/prize-info.html", windowClass: "奖品信息", 范围...
cordova 混合应用程序软导航栏与 bootom 上的菜单栏重叠
我用apache cordova开发了一个android应用程序。我正在使用 angularjs 和 bootstrap。我对某些 Android 设备有问题，这些设备底部有这样的软导航栏。 当软导航...
我有两个选项卡，一个是集群列表和模板列表。在模板列表中编辑某些内容后，我想返回到相同的选定模板列表。但它会进入集群列表。我试过了
我想创建引导下拉列表而不使用jquery 我想创建引导下拉列表而不使用jquery <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> 请帮助如何做到这一点 记住将 ui-bootstrap 指令添加到 angular.module HTML代码 <ul uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body"> <li role="menuitem"><a href="#">Action</a></li> <li role="menuitem"><a href="#">Another action</a></li> <li role="menuitem"><a href="#">Something else here</a></li> <li class="divider"></li> <li role="menuitem"><a href="#">Separated link</a></li> </ul> Js代码 angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) { $scope.items = [ 'The first choice!', 'And another choice for you.', 'but wait! A third!' ]; $scope.status = { isopen: false }; $scope.toggled = function(open) { $log.log('Dropdown is now: ', open); }; $scope.toggleDropdown = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.status.isopen = !$scope.status.isopen; }; $scope.appendToEl = angular.element(document.querySelector('#dropdown-long- content')); }); 我写了我的下拉菜单脚本，没有Jquery，没有Bootstrap js，只有bootstrap css，无论如何都很容易覆盖： document.addEventListener('DOMContentLoaded', function () { // -----Dropdown---------- // Rule: link.dropdown-link data-dropdown='dropdownIdentifier' div#dropdownIdentifier let dropdowns = document.querySelectorAll('.dropdown-link'); for (dropdown of dropdowns) { dropdown.onclick = function (e) { let dropdownDiv = document.getElementById(dropdown.getAttribute('data-dropdown')) if (dropdownDiv.style.display == "block") { dropdownDiv.style.display = "none"; } else { dropdownDiv.style.display = "block"; } } } }); 现在是 html 格式： <a class="dropdown-link" data-dropdown="dropdownId">Prodbox</a> <div id="dropdownId" class="dropdown-menu"> 1 2 3 </div> 请注意，下拉菜单是引导类来设置其样式，如果您不使用引导CSS，您可以编写自己的 在通过 webpack 捆绑的 Bootstrap 5 中，您可以通过创建新的 Dropdown 实例来实现。 示例： import Dropdown from 'bootstrap/js/dist/dropdown'; const dropdownEl = document.getElementById('dropdown'); new Dropdown(dropdownEl /*, options*/); 有关选项的详细信息文档。
Angular 9 - 复选框值在组件内更新，但未在 UI 中检查
将我的项目从 Angular 8 升级到 9 后，我在 UI 中遇到了一些问题。我似乎没有弄清楚的是，当复选框的值没有被“选中”时......
我的输入栏之间有空格，它只是将它们全部加在一起，这是我不想要的
燃油温度探针帽： ... <div class="row" style="margin-bottom: 0.1cm"> <div class="col-xs-4"> Fuel temp probe cap: </div> <div class="col-xs-2"> <input type="text" id="temp_prob" style="height: 20px; width: 100px; margin-left: -25px"> </div> <div class="col-xs-4"> Canister: </div> <div class="col-xs-2"> <input type="text" id="purge_vol" style="height: 20px; width: 100px; margin-left: -25px"> </div> <div class="col-xs-4"> Fuel Tank: </div> <div class="col-xs-2"> <input type="text" id="battery_volt" style="height: 20px; width: 100px; margin-left: -25px"> </div> <div class="col-xs-4"> Manufacture: </div> <div class="col-xs-2"> <input type="text" id="battery_cap" style="height: 20px; width: 100px; margin-left: -25px"> </div> <div class="col-xs-4"> Manufacture: </div> <div class="col-xs-2"> <input type="text" id="rec_energy" style="height: 20px; width: 100px; margin-left: -25px"> </div> <div class="col-xs-4"> Part Number: </div> <div class="col-xs-2"> <input type="text" id="soc_min" style="height: 20px; width: 100px; margin-left: -25px"> </div> <div class="col-xs-4"> Material: </div> <div class="col-xs-2"> <input type="text" id="num_of_cycles" style="height: 20px; width: 100px; margin-left: -25px"> </div> <div class="col-xs-4"> SOC min: </div> <div class="col-xs-2"> <input type="text" id="cop_file" style="height: 20px; width: 100px; margin-left: -25px" disabled="disabled"> </div> </div> </div> Obv 我已经搜索了堆栈溢出，我尝试了边距底部和之前给出的其他提示。我想无论以前的实习生是谁，都写得正确。 每次我尝试其中一种方法时，最终都会发生参数混乱的情况。见下图。 我猜列内容会溢出/换行到下一行，在输入行之间插入空格，解决方案是增加标签列的大小，下面的工作示例！ import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, template: ` <div class="row" > <div class="col-3"> Fuel temp probe cap: </div> <div class="col-3"> <input type="text" id="temp_prob" /> </div> <div class="col-3"> Canister: </div> <div class="col-3"> <input type="text" id="purge_vol" /> </div> <div class="col-3"> Fuel Tank: </div> <div class="col-3"> <input type="text" id="battery_volt" /> </div> <div class="col-3"> Manufacture: </div> <div class="col-3"> <input type="text" id="battery_cap" /> </div> <div class="col-3"> Manufacture: </div> <div class="col-3"> <input type="text" id="rec_energy" /> </div> <div class="col-3"> Part Number: </div> <div class="col-3"> <input type="text" id="soc_min" /> </div> <div class="col-3"> Material: </div> <div class="col-3"> <input type="text" id="num_of_cycles" /> </div> <div class="col-3"> SOC min: </div> <div class="col-3"> <input type="text" id="cop_file" /> </div> </div> `, }) export class App { name = 'Angular'; } bootstrapApplication(App); 堆栈闪电战