标签: angular-ui-bootstrap

我正在使用Angular Bootstrap UI的分页指令的相当简单的实现,但我一直得到一个我无法弄清楚的错误.这是相关的片段:

<ul>
  <li ng-repeat="todo in filteredIdeas">
    {{todo}}
  </li>
</ul>
<pagination ng-model="currentPage" total-items="totalIdeas"></pagination>

以下是控制器中$ scope的相关部分:

// Set watch on pagination numbers
$scope.$watch('currentPage + numPerPage', function() {

  var begin = (($scope.currentPage - 1) * $scope.numPerPage);
  var end = begin + $scope.numPerPage;

  $scope.filteredIdeas = $scope.ideasData.slice(begin, end);

});


// Data
$scope.ideasData = [];

for (var i = 0; i < 100; i++) {
  $scope.ideasData.push('To do ' + i);
}

$scope.filteredIdeas = [];
$scope.currentPage = 1;
$scope.numPerPage = 10;
$scope.totalIdeas = $scope.ideasData.length;

分页设置正确,但这是我在尝试点击下一页(或任何页面)时收到的错误: …

我正在使用来自http://angular-ui.github.com/bootstrap/的手风琴指令,我需要更多地控制手风琴何时打开和关闭.

更确切地说,我需要一个手风琴组内的按钮,它将关闭其母手风琴并打开下一个手风琴(所以基本上模仿如果close-others设置为true,点击下一个标题会做什么).我还需要做一些验证才能允许关闭手风琴并打开下一个,我还需要将其连接到手风琴标题上的单击事件.

我对angular非常新,我们目前正在将Backbone + JQuery的应用程序重写为Angular.在Backbone版本中,我们使用Twitter Bootstrap手风琴,我们使用JQuery打开和关闭它们.虽然我们仍然可以继续这样做,但我宁愿彻底摆脱JQuery DOM操作,所以我正在寻找一个纯粹的角度解决方案.

我在验证方面尝试做的是

<accordion-group ng-click="close($event)">

在我的控制器里

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

这显然不起作用,因为DOM元素被指令替换,并且从不添加点击处理程序.我一直在浏览源代码(并找到了一些非常好的无记录功能),但我甚至不知道在哪里开始解决这个特定的挑战.我正在考虑分配angular-ui并尝试将此功能添加到accordion指令中,但如果我能够在不修改指令的情况下实现这一点,那将会更好.

我有一个问题是动态地为angular的ui.bootstrap中的无线电模型生成选项.我想我可以简单地对一个数组进行ng-repeat,使用它的btn-radio属性的内容,如下所示:

//in the controller
$scope.radioModel =  undefined;
$scope.radioModelButtons = ["a", "b", "c"];

//in the html
<div class="btn-group" >
  <button ng-repeat="value in radioModelButtons"
    class="btn" type="button" ng-model="radioModel"
    btn-radio="'{{value}}'">
      {{value}}
  </button>
</div>

我正在使用angular 1.1.4和ui.bootstrap 0.3.0.

这是我努力的一个方面,你可以看到,单选按钮独立运行,不影响radioModel变量.

谢谢!

我正在使用Angular UI Bootstrap创建一个弹出框,但我无法找到在弹出框中添加关闭按钮的选项.

我自定义了弹出模板以包含关闭按钮.但是我仍然无法找到关闭弹出窗口的函数/事件.设置isOpen到false是第一次起作用,因为它只是覆盖了函数 - 但此后变得无法使用.

 <button popover-placement="bottom" popover="test">POPOVER WITH CLOSE<button>

这是模板脚本:

angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/popover/popover.html",
    "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
    "  <div class=\"arrow\"></div>\n" +
    "\n" +
    "  <div class=\"popover-inner\">\n" +
    "      <button ng-click=\"isOpen = !isOpen()\" class=\"btn-popover-close btn btn-primary\">Close</button>\n" +
    "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
    "      <div class=\"popover-content\" ng-bind=\"content\"></div>\n" +
    "  </div>\n" +
    "</div>\n" +
    "");
}]);

我想写一个关闭按钮的指令来触发"POPOVER WITH CLOSE"按钮的"点击"事件.但我不确定这是否是要遵循的方法.

什么是正确的方法？

我有一个奇怪的问题,Date当它通过$ http.put传递给API时发生了变化,我怀疑是时区问题:

Datepicker触发ng-change事件 - console.log:

Tue Jun 10 2014 00:00:00 GMT+0100 (GMT Summer Time)

使用Angular $ http.put传递给API ...

当它击中提琴手时:

StartDate=2014-06-09T23:00:00.000Z

如您所见,日期从6月10日到6月9日.

我怎样才能阻止这种更改日期？这是导致变化的时区吗？API和客户端都在Localhost上运行.

除此之外:

当第二次单击该字段并选择了datepicker启动/日期时,第二次出现问题:

CONSOLE.LOG:

Wed Aug 06 2014 22:00:00 GMT+0100 (GMT Summer Time)

收到的提琴手数据:

StartDate=2014-08-06T21:00:00.000Z

我想使用ui.bootstrap.dropdown消息框以与ui.bootstrap.popover类似的方式显示文本信息(而不是链接).我想修改这个指令,因为它完成了我需要的99%,我不想添加popover所需的所有额外的JS.

换句话说,我希望当用户将鼠标悬停在向下箭头上时显示"下拉列表区域",然后当他们将鼠标从向下箭头移开时离开.

有没有办法可以为ui.bootstrap.dropdown添加一个选项,所以将鼠标悬停在箭头上会显示并隐藏下拉框.我不想在此框中放置任何链接.

我希望有人有一些想法可以帮助我建议如何更改ui.bootstrap.dropdown附带的这个指令:

.directive('dropdownToggle', function () {
    return {
        require: '?^dropdown',
        link: function (scope, element, attrs, dropdownCtrl) {
            if (!dropdownCtrl) {
                return;
            }

            dropdownCtrl.toggleElement = element;

            var toggleDropdown = function (event) {
                event.preventDefault();

                if (!element.hasClass('disabled') && !attrs.disabled) {
                    scope.$apply(function () {
                        dropdownCtrl.toggle();
                    });
                }
            };

            element.bind('click', toggleDropdown);

            // WAI-ARIA
            element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
            scope.$watch(dropdownCtrl.isOpen, function (isOpen) {
                element.attr('aria-expanded', !!isOpen);
            });

            scope.$on('$destroy', function () {
                element.unbind('click', toggleDropdown);
            });
        }
    };

我正在尝试创建一个div,它会在单击按钮时显示/隐藏.该UI引导页面显示了使用CSS转换一个不错的简单的例子.

这是我的小提琴,我复制他们的代码,几乎完全(稍微改变使html语法突出显示工作,以及在js中声明我的"app"的行).

正如您所看到的,它在示例中不起作用 - 没有转换.为什么不？也许需要一个css转换规则 - 但这不是bootstrap.css提供的那部分吗？

对于后代,来自小提琴的等效html文件将是:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script>

</head>
<body ng-app="my_app">
    <div ng-controller="CollapseDemoCtrl">
        <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
        <hr />
        <div collapse="isCollapsed">
            <div class="well well-lg">Some content</div>
        </div>
    </div>
</body>
</html>

和等效的.js将是:

var my_app = angular.module('my_app', ['ui.bootstrap']);

my_app.controller('CollapseDemoCtrl', function ($scope) {
    $scope.isCollapsed = false;
});

谢谢!

我正在尝试使用angular-ui bootstrap手风琴来保持标题内的引导表.当用户点击手风琴标题并打开时,会出现一个奇怪的轮廓.它看起来像这样("一些标题"周围的浅蓝色矩形):

我明白这是因为我使用了它<div>,但我怎样才能消除这种行为？

代码是:

<accordion close-others="true">
  <accordion-group>
    <accordion-heading>
      <div>Some title</div>
    </accordion-heading>
    Text
  </accordion-group>
  <accordion-group>
    <accordion-heading>
      <div>Another title</div>
    </accordion-heading>
  </accordion-group>
</accordion>

亲爱的我是Angularjs的新手我正在用Angular创建一个模态.我在网上找到的一个例子就是我很难理解

$scope.checkout = function (cartObj) {
  var modalInstance = $modal.open({
  templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',
  controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
  }],
  resolve : { // This fires up before controller loads and templates rendered
    cartObj : function() {
       return cartObj;
    }
  }
});

令我困惑的是cartObj,我已经收到的作为我的函数的参数通过依赖注入传递给我的控制器.但是为什么我必须创建一个名为cartObj的函数并返回该变量.这似乎令人困惑.有人可以帮忙吗？

当我popover点击弹出窗口外的任何地方时,我试图关闭我的Angular-bootstrap .根据这个问题的答案,现在可以通过利用新popover-is-open属性来实现(在版本0.13.4中):在单击外部时隐藏Angular UI Bootstrap popover

目前我的HTML看起来像这样:

<div
  ng-click="level.openTogglePopover()"
  popover-template="level.changeLevelTemplate"
  popover-trigger="none"
  popover-placement="right"
  popover-is-open="level.togglePopover">
  <button class="btn btn-default btn-xs" type="button">
    <span class="glyphicon glyphicon-sort"></span>
  </button>
</div>

......和我的相关控制器代码:

vm.togglePopover = false;

vm.openTogglePopover = function() {
  vm.togglePopover = !vm.togglePopover;
};

这对于在单击上面引用的按钮时打开/关闭弹出窗口非常有用.我的问题是,当点击弹出窗口外的任何地方时,我如何扩展此功能以关闭弹出窗口？我如何设置事件处理来完成此任务？