我正在尝试为带有下拉菜单的手风琴添加一个按钮,但它似乎没有工作:
1)按钮太大所以它超过了手风琴标题.2)下拉菜单最终在手风琴标题/组内,而不是在其他所有内容之上.
解决这些问题的最佳方法是什么?我想要
以下是我的手风琴组代码:
<accordion-group is-open="true">
<accordion-heading>
<div class="btn-group" style="float:right;">
<button type="button" class="btn btn-info">Info</button>
</div>
</accordion-heading>
</accordion-group>
Run Code Online (Sandbox Code Playgroud)
这篇文章是类似的,但我希望按钮位于标题的右侧,而不是紧挨着文本,这就是为什么我有一个浮点数:左边.
angularjs angular-ui-bootstrap twitter-bootstrap-3 angular-bootstrap
我使用angular-bootstrap和Angular Smart表.我有一个模态表单,它将新记录添加到数据库并显示我的智能表中的列表.添加新记录工作正常但如何在将新记录插入数据库后刷新智能表.
调节器
//ajax request to gather data and list in smart table
october.controllers['dashboard/feeds'] = function ($scope, $filter , $request, $modal, $log, $http) {
$scope.api = $request('onFeeds', {success: function(data, scope){
this.success(data).done(function() {
$scope.rowCollection = [];
$scope.rowCollection = angular.fromJson(data.result);
$scope.displayedCollection = [].concat($scope.rowCollection);
});
}
});
}
//Modal
var ModalInstanceCtrl = function ($scope, $modalInstance, $request, $filter) {
$scope.save = function (data) {
$request('onAddFeed',
{data:data,
success: function(data){
this.success(data);
$scope.refresh();
$modalInstance.close();
}
});
};
};
Run Code Online (Sandbox Code Playgroud)
模板
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">neue Feed …Run Code Online (Sandbox Code Playgroud) 如果我的帖子有任何错误,请接受我的道歉.这是我在此的头一篇博文.但是,我不是StackOverflow的新手.纠正我,如果有的话.
我正在使用来自以下url的angular-bootstrap-datetimepicker库: 链接到库
我目前正在页面上嵌入日历.我正在使用angular.js,moment.js,grunt和bower.加载日历绝对没有问题,甚至可以选择日期并显示所选日期.
以下是示例代码:
<div>
Selected Date: {{ data.embeddedDate | date:'yyyy-MMM-dd' }}
<datetimepicker data-ng-model="data.embeddedDate" data-datetimepicker-config="{ startView:'day', minView:'day'}" />
</div>Run Code Online (Sandbox Code Playgroud)
我想在datetimepicker在页面上显示时自动突出显示今天的日期.如您所见,在配置选项中,我可以设置默认视图和最小视图.
注意:我试图模仿Plunkr中的工作代码(到现在为止),但它没有显示日历.我也添加了所有库.无论如何,这只是为了想法.如果我能让Plunkr工作,我会再次更新.这是Plunkr的链接.
任何建议(关于默认今天突出显示日期)将不胜感激.
我正在尝试集成Angular bootstrap模态形式,
这是我的控制器
angular.module('app').controller('groupController',['groupService','$uibModal','toastr','$scope',function(groupService,toastr,$uibModal,$scope)
Run Code Online (Sandbox Code Playgroud)
我添加了$ uibModal作为依赖.在我的app.js中我也添加了ui.bootstrap作为依赖项,
我的angular.bootstrap版本是1.3.3
我的模态功能如下
vm.viewGroupDetail = function(userDetails) {
var scope = $scope.$new();
scope.userDetails = userDetails;
vm.modalInstance = $uibModal.open({
animation: true,
templateUrl: 'app/views/groups/group_details_modal.html',
windowClass: 'd-modal',
size: 'md',
scope: scope
// resolve: {
// userDetails: function () {
// return ;
// }
// }
});
};
Run Code Online (Sandbox Code Playgroud)
当我尝试使用断点并检查控制流时,它进入viewGroupDetail函数.但是在$ uibModal.open()时,控件会中断
我在这里失踪了什么?我在堆栈溢出中尝试了其他相关问题,没有给我一个解决方案,所以发布我自己的查询
有没有办法识别angular-bootstrap下拉菜单是否已关闭?我想识别这个事件并运行特定的功能.
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud) 我有使用 angular-bootstrap 和 ionicFramework 的应用程序。问题出在 angular-bootstrap $modal 元素中。我希望它有垂直滚动条,但在 ionic.css 中有样式:
::-webkit-scrollbar {
display: none;
}
Run Code Online (Sandbox Code Playgroud)
正因为如此,模态中没有滚动条。我尝试通过多种方式解决这个问题,但现在我很困惑。
我收到一个错误,其中TypeScript没有从platform-browser-dynamic识别导出的'bootstrap'函数.
ERROR in [default] ../retain-app/src/main.ts:1:9
Module '"../retain-app/node_modules/@angular/platform-browser-dynamic/index"' has no exported member 'bootstrap'.
Run Code Online (Sandbox Code Playgroud)
我在main.ts中导入了bootstrap,如下所示:
import { bootstrap } from '@angular/platform-browser-dynamic';
Run Code Online (Sandbox Code Playgroud)
这是package.json中的依赖项:
"@angular/platform-browser-dynamic": "^2.0.0",
Run Code Online (Sandbox Code Playgroud)
任何帮助表示赞赏!
这可能是我一段时间以来处理过的最令人沮丧的问题之一。一般来说,日期,尤其是 NgbDatepicker 在 Angular 中处理起来有点麻烦。
我正在 Angular 8 中针对反应式表单实现 NgbDatepicker,我的问题的要点是我可以设置日期控件的初始值,但该初始值不会(视觉上)显示在表单上。我可以将表单记录到控制台并看到该值已设置,但表单字段本身并未更新。如果我从选择器本身选择一个日期,那么我的选择会反映在表单字段中。我原以为这就像设置[startDate]ngbDatepicker 输入的属性一样简单,但显然不是。我对此尝试了很多不同的迭代;这就是代码方面的情况:
我的HTML:
<input #licenseExpiration="ngbDatepicker"
class="form-control"
fromControlName="licenseExpiration"
[startDate]="startDate"
ngbDatepicker />
<button class="btn btn-info zero-spacing pt-1 pr-1 pl-1"
(click)="licenseExpiration.toggle()"
type="button">
Run Code Online (Sandbox Code Playgroud)
我的组件的相关部分:
@Component({
selector: 'app-cert',
templateUrl: './cert.component.html',
providers: [
{ provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
]
})
export class CertComponent implements OnInit {
certForm: CertForm = new CertForm();
constructor(
public readonly formatter: CustomDateParserFormatter) { }
ngOnInit() {
this.certForm.setModel(...modelObjectFromOtherService...);
}
get startDate() {
return { year: 2020, month: 6, day: 13 }; …Run Code Online (Sandbox Code Playgroud) date angular-bootstrap angular angular-reactive-forms ngb-datepicker
我正在使用这个轮播。
我想要类似这里的多项目轮播的东西。
我尝试按照本教程进行操作,但它最终破坏了我的网站并导致许多错误。
我尝试过的:
<ngb-carousel *ngIf="images">
<ng-template ngbSlide>
<div class="row">
<div class="item card col-md-3" *ngFor="let image of images">
<img src="{{image.picture}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</ng-template>
</ngb-carousel>
Run Code Online (Sandbox Code Playgroud)
它没有达到我想要的效果。我想要同一行中有 2 或 3 个项目可供您滑动。您将如何使用 Angular Bootstrap Carousel 来实现这一目标?
我最后的手段是支付MDB库的费用。我们将非常感谢您的帮助。谢谢。
我的版本是:
1. npm v6.14.12
2. node v10.24.1
3. angular-cli v8.0.2
Run Code Online (Sandbox Code Playgroud)
我使用以下命令创建了一个库:
步骤1:ng new my-workspace --create-application=false
第2步:cd my-workspace然后ng generate library my-lib
步骤3:cd projects/my-lib/src/lib
步骤4:npm install bootstrap --save
之后我可以看到my-workspace/projects/my-lib/package.json
"dependencies": {
"bootstrap": "^5.0.1"
}
Run Code Online (Sandbox Code Playgroud)
但现在我被困住了。我被告知在style.css或angular.json中添加 bootstrap 。但这些文件不会存在于库代码中。请告诉我如何进行此操作。我发现的几乎所有文章都是针对成熟的角度应用程序。
这意味着