angular-ui-bootstrap 相关问题

我怎样才能以角度保持页面刷新上的选定选项卡..？

我有两个选项卡，一个是集群列表和模板列表。在模板列表中编辑某些内容后，我想返回到相同的选定模板列表。但它会进入集群列表。我试过了

如何在没有jquery的情况下创建引导下拉列表

我想创建引导下拉列表而不使用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); 堆栈闪电战

CSS 中的滚动条拇指高度

滚动滑块的高度是否根据可滚动区域设置为默认值？如果没有，我可以设置滚动条拇指高度吗？如果可以怎么办？我尝试按照以下方式进行操作。 body::-webkit-scro...

未捕获的语法错误：意外的标记< when using bootstrap js索引

这是我的index.html的代码： 索引 ...

我的标题标签内的 html 菜单未正确悬停在角度上，请指导我

下面是我在 Angular 应用程序中使用的 CSS，菜单没有悬停在角度组件中的所有控件上 CSS 导航{ 背景颜色：#4D678D； } 导航 ul { ...

Angular API 调用每秒都会获取数据

我继承了一些 Angular/ng-boostrap 代码，这些代码定义了一个包含静态数据的表，可以正常工作。现在我们需要从 API 调用中获取数据，因此我尝试对其进行如下修改。我用了答案...

引导模式在 Angular 应用程序中不起作用

我正在尝试使用 HTML 中的类在 Angular 应用程序中使用 Bootstrap 模式，但它不起作用 - 它没有显示为模式 我正在尝试使用 HTML 中的类在 Angular 应用程序中使用 Bootstrap 模式，但它不起作用 - 它没有显示为模式 <div class="modal text-center" *ngIf="showmodal" tabindex="-1" id="withScrollExampleModal"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fw-normal">Basic dialogue title</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> <i class="fa-light fa-circle-xmark"></i> </button> </div> <div class="modal-body f-14"> <p>Lorem ipsum dolor sit amet consectetur. Enim libero commodo nibh vitae sed laoreet magna dui pharetra. </p> </div> <div class="modal-footer d-flex justify-content-center"> <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Action 1</button> <button type="button" class="btn btn-outline-primary rounded-pill">Action 2</button> </div> </div> </div> </div> Bootstrap 具有用于打开和关闭模式的内置函数。 例如，有一个应该打开模态的按钮，在该按钮中需要有像 data-toggle="modal" 这样的数据切换以及像 data-target="#Id of the modal" 这样的模态的目标 ID 此外，模态本身必须有一个名为“模态”的类和一个 id。此 id 必须与数据目标相同。 这是模态的示例。 <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 为此，请确保在头部导入以下项目 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 有关引导程序中模态的更多信息，请访问以下链接 https://getbootstrap.com/docs/4.0/components/modal/

如何在引导程序中将最后两张卡居中？

我使用引导程序以角度编写应用程序。我希望最后两张牌位于中间，而不是左侧。现在看来最后一张牌不见了。我想纠正它。怎么办？...

更改 ui.bootstrap.alert 的高度

我正在尝试根据此示例添加 ui.bootstrap.alert：https://plnkr.co/edit/?p=preview。 它的工作原理如下，只是它对我来说太大了。 所以我改变了CSS的高度，在这里'...

我无法使用 Angular 从 Bootstrap 5 中的表单获取数据

我正在使用 Angular 和 Bootstrap 5。我有一个表单。我有一个这样的html代码： Tür adı 我正在使用 Angular 和 Bootstrap 5。我有一个表单。我有这样的 html 代码： <div class="mb-3"> <label for="genreName"> Tür adı</label> <div *ngIf="!enterTheGenre" class="form-group"> <select class="form-select"> <option [value]="genre.genreName" *ngFor="let genre of genres"> {{ genre.genreName }} </option> <option>Tür ekle</option> </select> </div> 我的ts文件是这样的： addBook() { let bookModel:Book = Object.assign({}, this.bookAddForm.value); } 但我无法从表单获取数据。我的 GenreName 数据始终为空。我使用 select 作为 GenreName，但对于其他人，我使用输入，这样我可以从输入中获取数据，但无法从表单中获取数据。 我更改了值参数，例如 [value]="genre" 但不起作用。 我无法判断您在代码中是否正在执行模板驱动表单或反应式表单，但无论哪种方式，您似乎都没有将任何内容绑定到您的选择。 如果您正在执行模板驱动表单，则需要绑定到 ngModel 或订阅 changes 元素上的 <select> 事件。 示例1： <select class="form-select" [(ngModel)]="book.genre"> 示例2： <select class="form-select" (change)="onGenreChange($event)"> 有关构建模板驱动表单的更多信息，请参阅Angular 的文档 如果您使用反应式表单，则需要在formControl元素上添加<select> 示例3： <select class="form-select" [formControl]="bookAddForm"> 有关反应式表单的更多信息，请参阅Angular的文档

有没有办法在单个控制器中使用 $uibModal 和 $uibModalInstance 来使用 Angular 和 TypeScript 实现模式弹出？

由于我是 Angular 打字稿的新手，我在实现 Angular 模态弹出窗口时遇到了问题。问题是我有一个下拉菜单，我必须打开一个模式弹出窗口，然后才能更改该模式......

Angular Datepicker 无法在页面滚动上正确移动

HTML代码 ... HTML代码 <div class="col-5 col-md-3 px-0 daterange-picker"> <div class="form-group"> <div class="input-group"> <input type="text" id="secondDateRange" class="form-control pl-2 pr-1 text-center overflow-" name="daterangeInput" daterangepicker [options]="options" /> </div> </div> <!-- <input type="text" name="daterangeInput" daterangepicker [options]="options" /> --> <!-- <date-range-picker [instanceId]="'secondDateRange'" [options]="options" [controlName]="'secondDateRange'" #dateRangePicker (rangeSelected)="onRangeSelected($event)"> <div class="form-group"> <div class="input-group"> <input id="secondDateRange" class="form-control pl-2 pr-1 text-center" type="text" name="dateRange" [value]="displayDateRange" placeholder="Date Range" formControlName="secondDateRange" [disabled]="true" /> </div> </div> </date-range-picker> --> </div> 请修复日期选择器 我尝试更改日期选择器，但问题没有解决？ 使用浏览器检查并设置日期选择器的样式，然后在代码中使用::ngdeep。

Bootstrap CSS 与 ngTable 的兼容性

我正在开发 AngularJs 应用程序。 版本 - AngularJS - 1.8.2 Bootstrap.css - 2.3.2 我正在将 ngTable 集成到应用程序中。分页 css 不适用于 ngTable。当我使用引导时...

如何使用 Angular 2 在 Spring boot 中导出 excel 文件？

在我的项目中，我需要将客户数据导出到Excel文件中。我正在使用 Hybernate 构建的表结构。 我的控制器是： @RequestMapping(value="exporttoexcel", method=RequestMethod....

如何使用 Angular Js 在下拉列表中进行按键选择？

我有一个下拉菜单，其中项目尺寸很大，因此我正在寻找一种启用键盘输入（按键）的方法，以便我可以输入内容，并且它会自动移至下拉菜单中的该选项。任意

仅年和月日期选择器AngularJS和Bootstrap

我有问题，我想从日期到日期使用日期选择器（签入和签出是几个月而不是几天），它应该是几个月，问题是：我有模板，但它显示了日期和

从 ng carousal 顶部删除幻灯片编号文本

我正在使用 ng-bootstrap 的轮播： 我正在使用 ng-bootstrap 的轮播： <ngb-carousel [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators"> <ng-template ngbSlide> <div class="picsum-img-wrapper"> <img src="assets\fsfhjllz_vegetables-banner.png" class="mh-100" style="width: 100%; height: 30vh; object-fit:cover;"> </div> </ng-template> <ng-template ngbSlide> <div class="picsum-img-wrapper"> <img src="assets\vh9oeys6_fruit-banner.png" class="mh-100" style="width: 100%; height: 30vh; object-fit: cover;"> </div> </ng-template> </ngb-carousel> 它会在图像顶部显示此文本，例如：幻灯片 1（共 2 张）。 如何删除此文本并仅显示图像。 在浏览器中检查时显示如下:: <div role="tabpanel" class="carousel-item" id="slide-ngb-slide-1"> <span class="sr-only"> Slide 2 of 2 </span> // this one 这里是这个和平的源代码： <span class="sr-only" i18n="Currently selected slide number read by screen reader@@ngb.carousel.slide-number"> Slide {{i + 1}} of {{c}} </span> 我看到隐藏此文本的两种可能性： 添加 CSS to hide .carousel-inner .sr-only 来隐藏该元素，例如 .carousel-inner .sr-only { display: none; } 将翻译键 ngb.carousel.slide-number 的值设置为空字符串。 国际化指南。 对于 ngbootstrap 15.1 和 bootstrap 5，显示幻灯片信息的 <span>，例如“幻灯片 2 of 2”，现在带有 css 类 visually-hidden。 如果您将 Bootstrap 与 SCSS 一起使用，并且没有通过 @import "/bootstrap/scss/bootstrap"; 导入整个 Bootstrap，而是仅导入您需要的内容，那么您将在 helpers/_visually-hidden 中找到 css 类： @import "bootstrap/scss/helpers/_visually-hidden"; Bootstrap 文档：https://getbootstrap.com/docs/5.0/helpers/visually-hidden/

Angularjs 手风琴访问处于打开状态

有没有办法访问手风琴组是否打开？我知道有 isOpen 指令，但我不确定是否有办法在纯粹的 html 中访问它的状态。使用...