标签: angular-bootstrap

如何在bootstrap 3.0/bootstrap-ui中的accordion header中添加一个按钮?

我正在尝试为带有下拉菜单的手风琴添加一个按钮,但它似乎没有工作:

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)

这篇文章是类似的,但我希望按钮位于标题的右侧,而不是紧挨着文本,这就是为什么我有一个浮点数:左边.

角度UI手风琴与标题部分中的按钮

angularjs angular-ui-bootstrap twitter-bootstrap-3 angular-bootstrap

5
推荐指数
2
解决办法
1万
查看次数

在Bootstrap模式窗体中插入新记录后,AngularJS刷新智能表

我使用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)

angularjs angularjs-directive angular-bootstrap smart-table

5
推荐指数
1
解决办法
2万
查看次数

Angular Bootstrap DateTimePicker - 在嵌入式日历上突出显示今日日期

如果我的帖子有任何错误,请接受我的道歉.这是我在此的头一篇博文.但是,我不是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的链接.

任何建议(关于默认今天突出显示日期)将不胜感激.

datetimepicker angularjs momentjs angular-bootstrap

5
推荐指数
1
解决办法
1799
查看次数

$ uibModal.open()不是函数

我正在尝试集成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()时,控件会中断

我在这里失踪了什么?我在堆栈溢出中尝试了其他相关问题,没有给我一个解决方案,所以发布我自己的查询

angularjs angular-ui-bootstrap angular-bootstrap

5
推荐指数
1
解决办法
6682
查看次数

识别何时关闭角度引导下拉菜单

有没有办法识别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)

javascript angularjs angular-bootstrap

4
推荐指数
1
解决办法
7704
查看次数

以模态显示滚动

我有使用 angular-bootstrap 和 ionicFramework 的应用程序。问题出在 angular-bootstrap $modal 元素中。我希望它有垂直滚动条,但在 ionic.css 中有样式:

::-webkit-scrollbar {
display: none;
}
Run Code Online (Sandbox Code Playgroud)

正因为如此,模态中没有滚动条。我尝试通过多种方式解决这个问题,但现在我很困惑。

css ionic-framework angular-bootstrap

4
推荐指数
1
解决办法
8545
查看次数

Angular 2构建错误 - '../@angular/platform-b​​rowser-dynamic'没有导出成员'bootstrap'

我收到一个错误,其中TypeScript没有从platform-b​​rowser-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)

任何帮助表示赞赏!

angular-bootstrap angular

4
推荐指数
1
解决办法
5694
查看次数

反应式形式的 NgbDatepicker:设置初始值

这可能是我一段时间以来处理过的最令人沮丧的问题之一。一般来说,日期,尤其是 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

4
推荐指数
1
解决办法
1万
查看次数

如何在 Angular Bootstrap Carousel 中拥有多个卡片项目?

我正在使用这个轮播

我想要类似这里的多项目轮播的东西。

我尝试按照本教程进行操作,但它最终破坏了我的网站并导致许多错误。

我尝试过的:

<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库的费用。我们将非常感谢您的帮助。谢谢。

carousel angular-bootstrap angular

4
推荐指数
1
解决办法
2万
查看次数

如何在 Angular 库中添加引导程序

我的版本是:

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.cssangular.json中添加 bootstrap 。但这些文件不会存在于库代码中。请告诉我如何进行此操作。我发现的几乎所有文章都是针对成熟的角度应用程序。

这意味着

angular-bootstrap angular

4
推荐指数
1
解决办法
4497
查看次数