标签: angular-ui-bootstrap

我刚刚开始学习Angular.js,我正在使用Angular-ui中的Carousel控件.是否可以同时显示两张幻灯片而不是一张？

我想显示像这样的图像 -

< image 1 image 2 >
then
< image 3 image 4 >
then
< image 5 image 6 >

这是一个样本 -

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

我是AngularJS的新手,我想用Angular UI Bootstrap创建一个旋转木马.是否可以通过单击按钮转到特定幻灯片？

http://plnkr.co/edit/X0Mr1sPUr5Je0tfkzgjy

非常感谢!

我正在尝试用手风琴里面的日期选择器做一个模块.

问题是手风琴上看不到日期选择器弹出框.

这是一个显示问题的plunker:

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

关于如何让对话窗口出现在手风琴模块上的任何想法？

编辑:使用bootstrap 3,这是有效的:

.panel-group .panel {
    overflow: inherit;
}

我正在改进我的ui.bootstrap typeahead添加一些awesomne​​ss,但我在这个上苦苦挣扎.

我创建了一个小型的Plunker来演示我的问题:http://plnkr.co/edit/u2Le37？p = preview

关于这个问题的两个词:
我有这个对象数组填充我$scope.data但我无法告诉我typeahead只使用特定字段来搜索结果

$scope.data = [
  {
    name: 'Mario',
    desc: 'Super Plumber',
    id: 0,
    type: 'good'
  },
  {
    name: 'Luigi',
    desc: 'Assistant Plumber',
    id: 1,
    type: 'good'
  }, 
...

每当您在预先搜索时,您将搜索对象中的每个字段,甚至type和id

我尝试过这样的解决方案,但没有成功:

typeahead="datum.name as ( datum.name +', '+ datum.desc) 
    for datum in data | filter:$viewValue | limitTo:8"

---> no change


typeahead="datum as ( datum.name +', '+ datum.desc) 
    for datum.name in data | filter:$viewValue | limitTo:8"

--> no match …

我有一个简单的数据集,我想使用angular-js ui进行分页.这是服务器驱动的分页,因为它可以变得非常大.

现在,我遇到的问题是我的分页元素没有显示出来.

<pagination total-items="totalItems" page="filterCriteria.pageNumber"></pagination>

就是我所拥有的,这两个参数都是正确的(测试过).

起初我以为我可能没有导入所有正确的文件,但经过一些检查后我似乎找不到任何遗漏:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="js/angular-file-upload-shim-min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>

有什么想法为什么分页元素不会出现在我的页面上？

我正在为Angular使用UI引导程序,我已将ui.bootstrap.modal组件集成到我的解决方案中.除了一件事,一切都很好.我设置了$ scope.$ watch来监视位于模态后面的控制器上特定属性的更改,但是,当属性更改时它不会触发.

我在plunkr中复制了它

正如您所看到的,当模态打开时它会触发一次,但是当您更改UI中的复选框值时则不会触发.绑定看起来很好,因为更新一个复选框会更新另一个(两者都绑定到同一属性).

有任何想法吗？

谢谢!

我在我的页面中使用AngularJS和AngularJS引导程序.我有一个日期选择器指令,如下所示:

    <div class="form-group {{dateStatus.class}}">
        <p class="input-group">
            <input type="text" id="inpDate" class="form-control" 
                   datepicker-popup="dd-MMMM-yyyy" ng-model="task.date" 
                   is-open="datePickerStatus.isOpen" min-date="minDate" 
                   datepicker-options="dateOptions" ng-required="true" 
                   close-text="Close" placeholder="Due date" 
                   ng-change="checkDateValidity()"
            />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" 
                        ng-click="openDatePicker($event)"
                >
                    <i class="glyphicon glyphicon-calendar"></i>
                </button>
            </span>
        </p>
    </div>

要验证日期输入,在我的控制器中我有以下功能:

        $scope.checkDateValidity = function(){
        var date,
            isValid,
            taskDate;
        taskDate = $scope.task.date;
        date = new Date(taskDate);
        isValid = !isNaN(date);
        if(isValid) {
            $scope.addButtonState.isOk = true;
            $scope.dateStatus.class = '';
        }
        else{
            $scope.addButtonState.isOk = false;
            $scope.dateStatus.class = 'has-error';
        }
    }

一切正常,检查插入的日期是否有效,但问题是,当日期输入留空(或从有效状态更改为空白)我希望它也可以接受,但由于空输入和无效日期是undefined我不知道该怎么情况之间申报.

我还想过直接读取输入文本:

document.getElementById('inpDate').value

但是当值改变时触发了ng-change,而我留下了之前没用的前一个值...... …

我正在尝试使用angular-ui bootstrap作为日期范围.

http://angular-ui.github.io/bootstrap/#/datepicker

该链接包含一些很好的例子.但是,我想使用controller as语法而不是上面链接中显示的范围.

我试过它,如下所示.但它点击时没有显示日历框.它没有返回任何错误,所以我有点失去了我需要做什么.我想我的榜样很接近.

这是我对小提琴的尝试

下面的代码片段..

js_file.js

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function() {

  self = this;
  self.someProp = 'Check This value displays.. confirms controller initalised'

  self.opened = {};
  self.open = function($event) {

    $event.preventDefault();
    $event.stopPropagation();

    self.opened = {};
    self.opened[$event.target.id] = true;

    // log this to check if its setting the log    
    console.log(self.opened);

  };

  self.format = 'dd-MM-yyyy'
});

的index.html

<body>
<div ng-controller="DatepickerDemoCtrl as demo">
<style>
  #dateFrom, #dateTo { width: 200px;}
</style>

  {{ demo.someProp }}

  <div class="form-group">

      <div …

本质上，我的数据库中有一列是日期类型，但可以为null。我有一个使用Angular / Bootstrap的表单，该表单允许用户根据需要输入日期，但不必输入日期，为此，我使用Bootstraps表单控件类，并为输入提供日期类型。

第一次为表单加载日期的空值时，一切工作都会保存下来。数据库可以很好地保存它，并且一切都很好。但是，如果数据库中显示的是空值，则当我将记录加载到这种形式时，Angular / Javascript将其显示为12/31/1969，而不是最初加载空值时的“ mm / dd / yyyy”。这会引起问题，因为如果用户保存此表单，它将默认的12/31/1969作为真实日期并将其保存为输入。

我已经通过控制台对其进行了跟踪，并且我100％肯定日期值为null（），当它碰到我的模型绑定时，我想不起来在这种情况下该怎么做，我真的很感谢任何指针。

在提取数据时：

if (myDateFromDatabase !== null) { 
    myDateFromDatabase = new Date(myDateFromDatabase); 
}

鉴于：

<input ng-model="myDateFromDatabase" type="date" class="form-control" />

在ui-bootstrap 1.3.3中,我有一个带有弹出窗口的按钮和以下触发器

popover-trigger="click outsideClick"

单击按钮时触发器打开了弹出窗口,并在单击任何其他内容时将其关闭

在ui-bootstrap 2.0.0中,此弹出窗口触发器失败

错误:$ parse:syntax语法错误

Syntax Error: Token 'outsideClick' is an unexpected token at column 7 of the expression [click] starting at [{4}].

试着两个

popover-trigger="click"并 popover-trigger="outsideClick"似乎工作,但它不是我要求的行为.

仔细阅读他们最新的更改日志,我找不到任何提及.我怎么能纠正这个？