标签: angular-ui-bootstrap

我喜欢将timepicker显示为像datepicker这样的输入元素中的下拉列表(弹出窗口).有没有简单的方法来实现这个目标,还是需要一个完整的新指令？

请参阅plunkr代码,演示我在AngularJS中使用模态服务时遇到的问题.

基本上,我已经将模态窗口的HTML内容移动到一个单独的文件中,现在当单击按钮时出现背景但是模态窗口没有 - 在第一次单击时.

如果您然后按"退出"以关闭背景,然后单击按钮,将出现模态窗口.

我假设这是因为我第一次单击按钮时没有加载文件 - 但如果是这样,我如何使用templateUrl属性使我能够将模态窗口的内容存储在单独的文件中？

感谢您的帮助.

如何在UI-Bootsrap的Tab Nav上替换或添加新类.我期待的是,

<ul class="MY-CUSTOM-CLASS" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
       <li ng-class="{active: active, disabled: disabled}" heading="Justified" class="ng-isolate-scope">
            <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">Justified</a>
       </li>

       .....          
</ul> 

我尝试了以下但是,它正在将类添加到父级,

<tabset justified="true" class="tab-nav">
       <tab heading="Justified">Justified content</tab>
       <tab heading="SJ">Short Labeled Justified content</tab>
       <tab heading="Long Justified">Long Labeled Justified content</tab>
</tabset>

我在使用Bootstrap UI + Bootstrap UI DateTimePicker(https://github.com/Gillardo/bootstrap-ui-datetime-picker)时遇到问题,其中包含无意义的日期作为日历弹出窗口中最左侧的列.请参见下面的截图.从上到下,不应该存在的日子分别是31,32,33,34,35,36.无论我切换到哪个月,它们都存在.

我们有一个评级组件:

uib-rating(ng-init="average = xxxx", ng-model="average", max="5", readonly="true")

由于ng-model在这里使用局部变量,我们有意识地以一种方式绑定该组件.但问题在于readonly属性.

这在我们的本地机器上运行良好.但是当我们在服务器(linux astra)上部署它时,星星仍然活跃.什么可能导致这个问题？(我们在服务器和本地机器上使用相同的角度组件版本)

我试图使用angular ui bootstrap在tab选项上调用表达式函数,但是没有调用表达式但是检查角度检查器是否存在函数/表达式:下面是我的代码工作:

注意:其他标签功能正常

角度视图

<uib-tab ng-click="vm.alertMe" select="" heading="New Invoice">
                          .....
 </uib-tab>

用作vm的控制器

vm.alertMe = alertMe;

 function alertMe() {
            setTimeout(function() {
              $window.alert('You\'ve selected the alert tab!');
            });
          } 

请帮忙吗？

版本:

• Bootstrap 3.5.5
• AngularJS 1.4.7
• AngularUIB 0.14.3

我在选项卡页面中使用了一个uib-datepicker(使用uib-tabset)

<uib-tabset type='pills'>
  <uib-tab heading='HeatMap'>
    <input id='dateToImport' type='text' uib-datepicker-popup='yyyy-MM-dd' class='form-control' ng-change='changeDateTime()' ng-model='selectedDate' is-open='isDatePickerOpen' ng-click='openDatePicker($event)'/>
  </uib-tab>
</uib-tabset>

控制器代码:

app.controller("ctrl", function($scope, heatMapSvc){
  $scope.isDatePickerOpen = false;

  $scope.openDatePicker = function(){
    $scope.isDatePickerOpen = true;
    console.log("isDatePickerOpen?", $scope.isDatePickerOpen);
  };
});

选择输入时,datepicker日历将按预期显示.但是,一旦我选择了日期,就会在选择时重新显示日期选择器日历.我没有专注,重新聚焦控制,没有.在我的openDatePicker方法调用中,我写入控制台以确保调用该方法.每次我选择日期选择器(无论是否出现日历),控制器都会触发正确的方法.

我将日期选择器从包装的tabset中取出,并且datepicker正常工作(每个选择显示日历).我需要这个datepicker在我定义的uib-tabset中正常工作.

我在angularjs项目中使用手风琴.

我想用手风琴甚至奇怪的不同颜色制作标题行.

这是我的视图模板:

<div class="container">
    <div id="accordionWrapper">
        <accordion close-others="true">
            <!-- All Remaining Groups -->
            <accordion-group ng-repeat="inspection in inspections.inspectionsDamage" is-open="isOpen" >
                <accordion-heading>
                    <div class="text-center">
                        <strong>{{inspection.inspItemDesc}}</strong>
                        <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
                    </div>
                </accordion-heading>
                <div class="col-md-3 col-xs-6 small">
                    <label>fix type: </label> {{inspection.inspItemDesc}}<br>
                </div>
                <div class="col-xs-12"><hr></div>
            </accordion-group>
        </accordion>
    </div>
</div>

这是它在视图中的样子:

这是我理想的观点:

我试着添加这些行:

ng-class-odd="'blueStyle'" 

ng-class-even="'greenStyle'"

到这一行:

 <accordion-group ng-repeat="inspection in inspections.inspectionsDamage" is-open="isOpen" >

但我没有得到理想的结果.

任何想法如何在手风琴自举中使奇数偶数行成为不同的颜色？

如果我将我的角度版本更新为更高版本，我相信它会起作用，但是我更依赖于1.3.20角度版本。

我尝试了angular-bootstrap版本从1.1到latest，都无法使用1.3.20。我得到的只是未知的提供者。

http://plnkr.co/edit/8TynLlehbEoJF4HY9o0S?p=preview

当您注释第9行和取消注释第10行时，此plunkr代码有效。

但是，当1.3.20的ngAnimate和angular版本的angular-bootstrap版本为0.14.3时，它是非常旧的代码，它可以很好地工作。

如何在不升级角度版本的情况下解决此问题？

如果我可以$animateCss显式添加提供程序，那么它起作用吗？但我怀疑它是否会影响其他任何代码。

我不想使用angular-bootstrap的0.14.3，因为它已经过时了。

从ui-bootstrap的0.14版开始,它看起来像uib-tooltip-html(previsously:tooltip-html-unsafe)不再起作用了......或者不是我过去使用它的方式.

基本上,当'tooltip-html'没有时,'工具提示'有效:

<a href="#" uib-tooltip-html="UIB-TOOLTIP-HTML">UIB-TOOLTIP-HTML</a>
<a href="#" tooltip-placement="right" uib-tooltip="UIB-TOOLTIP">UIB-TOOLTIP</a>

http://plnkr.co/edit/fJt3nBbT6rSbiN50h7Bp?p=preview

由于ui-bootstrap doc没有关于这个指令的例子,我无法猜出我做错了什么.

任何的想法？