标签: angular-ui-bootstrap

我试图使用从角UI引导LIB日期选择器组件作为这里descibed:http://angular-ui.github.io/bootstrap/ 我尝试设置选项,在弹出的选择器和accoriding到我应该通过文档使用datepicker-options属性将datepicker选项作为JSON.

在我看来,我有:

        <div class="row">
        <div class="col-md-6">
            <p class="input-group">
                <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                <span class="input-group-btn">
                <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
            </p>
        </div>
    </div>

在我的控制器中,我有:

    $scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};

    $scope.today = function() {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.showWeeks = false;

    $scope.clear = function () {
        $scope.dt = null;
    };

    $scope.toggleMin = function() {
        $scope.minDate = ( $scope.minDate ) ? null : new Date();
    };
    $scope.toggleMin(); …

没有太多的搜索.我在这里找到了一个类似的线程,但它对我来说并不适用.

这些示例表明Modal将获得一个单独的控制器.看起来像这样.

var app = angular.module('myApp', ['ngSanitize','angularModalService']);
app.controller('SampleController', ['$scope', function($scope) {

    $scope.showAlert = function() {

        ModalService.showModal({
            templateUrl: "alertWindow.html",
            controller: "AlertController",
            inputs: {
                title: "Add New Alert",
            }
        }).then(function(modal) {
            modal.element.modal();
            modal.close.then(function(result) {
                $scope.result = "blah";
            });
        });

     });
}]);

app.controller('AlertController', ['$scope', function($scope) {

    $scope.close = function(result) {
        close(result, 500); 
    };
}]);

我需要注意的是,我希望模态对话框具有SampleController中的一些默认值.我读了服务,但我认为这不起作用.输入:showModal()中的{}看起来很可疑,但是一旦显示模态窗口,我就不确定从哪里获取它.我见过的其他例子只显示简单的是/否按钮或文本输入w /空默认值.

在此plunker代码中将css版本更改为3.3.2,并且在打开模式时不会显示背景.

从

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

至

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

http://plnkr.co/edit/rzU6gQsjEP4R9sGKO2dl

下面的代码在普通桌面视图中水平显示。然而，在手机屏幕上，它是垂直显示的。

    <ul class="nav navbar-nav">
            <li>Link 1</li>
            <li>Link 2</li>
    </ul>

网页视图：链接 1 链接 2

手机查看：

链接1

链接2

我想水平显示移动视图。试图找到正确的 CSS，但花了几个小时却找不到它。有人能指出我正确的方向吗？

我想以编程方式激活选项卡但无法找到方法.

这是一个吸食者.HTML:

<tabset>
<tab id="a1" heading="Static 1">Static 111</tab>
<tab id="a2" heading="Static 2" ng-attr-active="{{nd}}">Static 222</tab>
</tabset>

JS:

$scope.nd = true;

ps:"标签及其内容不应在js文件中定义".

试图让印刷适用于Modals.

在最新的谷歌浏览器中,使用最新的angular-ui-bootstrap 0.14.2,我们在列表或表格等大型内容溢出到下一页时遇到问题.

我已经完成了隐藏背景对象的必要更改:将以下样式添加到模式页面中:

@media print {
      body * {
        visibility: hidden;
      }
      #print-content * {
        visibility: visible;
        overflow: visible;
      }
      #mainPage * {
        display: none;
      }
      .modal {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        min-height: 550px;
      }
      li {
        page-break-after: auto;
      }
    }

任何人都有快速解决方案吗？

Plunker:http://plnkr.co/edit/TV0ttEAw4LWJ6sGLjSTR？p = preview

您可以测试不同模态的打印预览和打印按钮.打印预览适用于当前页面,但不适用于模态.=(

如何使用全局配置引导程序日期选择器uibDatepickerConfig？文档只是说明如下:

所有设置都可以作为属性提供,也可以uib-datepicker通过全局配置uibDatepickerConfig.

在源代码中,它们被定义为常量:

.constant('uibDatepickerConfig', {
    formatDay: 'dd',
    formatMonth: 'MMMM',
    formatYear: 'yyyy',
    formatDayHeader: 'EEE',
    formatDayTitle: 'MMMM yyyy',
    formatMonthTitle: 'yyyy',
    datepickerMode: 'day',
    minMode: 'day',
    maxMode: 'year',
    showWeeks: true,
    startingDay: 0,
    yearRange: 20,
    minDate: null,
    maxDate: null,
    shortcutPropagation: false
})

在这篇文章中已经讨论了完全相同的问题,但解决方案似乎已经过时了.

我试图设置角度UI引导程序进度条的最小宽度.我检查了文档,他们没有提到如何做到这一点.我知道'常规'引导程序你可以使用类似的东西style="min-width: 10em;".但是这只有在你将它包装在标准进度引导div中时才有效:

<div class="progress">
    <uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
    <span> text </span></uib-progressbar>
</div>

但是这会显示一个没有"活动"动画的进度条,因为常规引导程序不支持此功能.当我这样尝试它时,它没有设置min-width属性

<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
    <span> text </span>
</uib-progressbar>

编辑:我忽略了'常规'bootstrap文档中的动画部分.但是,如果可能的话,我想使用UI引导程序进度条.

如果已经打开了一个模式，我的应用程序可以打开一个模式。如果是这种情况，我想关闭该模式并在完成后打开新模式。

打开模态的服务：

app.service('ModalService', function($uibModal) {
this.open = function(size, template, content, backdrop, controller) {
    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: content,
        windowTemplateUrl: template,
        controller: controller,
        backdrop: backdrop,
        size: size,
        resolve: {}
    });
    return modalInstance;
};

然后我打开一个：

var m = ModalService.open('lg', '', 'ng-templates/modal.html', true, 'ModalController');

我可以通过以下方式关闭它：

m.close();

当我打开模式时，我只能在同一个开关/案例中使用 m.close() 。如果我想在代码后面的另一个 if 语句中关闭它，则 m 是未定义的。

反正。我可以检查模式是否打开吗？如果我 console.log(m) 那么就是这样的：

d.$$state.status = 1
d.$$state.value = true

但我无法在应用程序的其他地方访问变量 m，因此我无法检查它。

如何检查模态窗口是否打开？

我定义了这样的属性

  modalInstance: NgbModalRef;

并像这样实例化模态

 this.modalInstance = this.modalService.open(UpdateModalContent);

我找不到任何本地财产，例如 this.modalReminderInstance.isOpen