标签: angular-ui-bootstrap

有没有办法告诉Angular UI中使用Bootstrap选项卡时选择了哪个选项卡？

我尝试观看窗格数组,但切换选项卡时似乎没有更新.选择选项卡时,可以指定回调函数吗？

使用代码示例更新.

代码非常遵循Angular UI引导程序页面中的示例.

标记:

<div ng-controller="TabsDemoCtrl">
    <tabs>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
            <div ng-include="pane.template"></div>
        </pane>
    </tabs>
</div>

控制器:

var TabsCtrl = function ($scope) {
  $scope.panes = [
    { title:"Events list", template:"/path/to/template/events" },
    { title:"Calendar", template:"/path/to/template/calendar" }
  ];
};

app.component.html

的index.html

app.component.ts 我试图在angular.json包中添加样式依赖项,但显示找不到该模块.添加两个引导程序文件.这是两个文件的屏幕截图

angular.json文件就像这个angular.json文件

对于angularjs和bootstrap来说有点新鲜.

我试图添加一个简单的下拉列表.但它没有用.

尝试了@ Bootstrap 3简单下拉不起作用的建议.那也行不通.

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" ui-sref="a">a<span class="caret"></span></a>
<ul class="dropdown-menu">
  <li><a ui-sref="a">a</a></li>
  <li><a ui-sref="b">b</a></li>
  <li><a ui-sref="c">c</a></li>
  <li><a ui-sref="d">d</a></li>
  <li><a ui-sref="e">e</a></li>
  <li><a ui-sref="f">f</a></li>
  <li><a ui-sref="g">g</a></li>
  <li><a ui-sref="h">h</a></li>
  <li><a ui-sref="i">i</a></li>         
  <li><a ui-sref="j">j</a></li>
  <li><a ui-sref="k">k</a></li>
</ul>
</li>

完整代码@ http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview

希望有人能帮助我.

它在非角度环境中非常简单.只需html和两行js代码在屏幕上显示模态确认对话框.

现在我正在开发一个AngularJS项目,我在其中使用ui-bootstrap模态确认对话框,我厌倦了创建新的控制器,即使对于"你确定要删除此记录吗？"等简单的事情.有点东西.

你如何处理这些简单的情况？我相信有些人会写一些指令来简化需求.

我要求您分享您对该主题的经验或项目.

我有一个输入输入.输入文本设置为在预先输入上选择的选项.但是,我想清除此文本并在从typeahead中选择其中一个选项后再次在文本框中显示"占位符"值(因为我将所选值添加到selectMatch()方法中的另一个div .

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected)" typeahead-min-length="3"
    typeahead-wait-ms="500">

我尝试使用其Id设置Input元素的文本值和占位符值,但这不起作用,例如:

// the input text was still the 
$('#searchTextBoxId').attr('placeholder', 'HELLO');

选定的结果

// the input text was still the selected result
$('#searchTextBoxId').val('');

如何设置或重置文本值？

我正在尝试使用http://angular-ui.github.io/bootstrap/在Angular中实现一个预先输入,其中typeahead字段显示完整的地址但是一旦点击另一个字段就会填充该地址的邮政编码.我正在尝试使用ng-change或ng-click,但没有任何成功..

http://jsfiddle.net/UxTBB/2/

angular.module('myApp', ['ui.bootstrap'])
    .controller("mainCtrl", function ($scope) {
    $scope.selected = '';
    $scope.states = [{postcode:'B1',address:'Bull ring'},{postcode:'M1',address:'Manchester'}];
    $scope.setPcode = function(site) {
        $scope.selPcode = site.postcode;
        };
});

<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid">
                postcode <input type="text" ng-model="selPcode" />
                typeahead <input type="text"  ng-change="setPcode(site)" ng-model="selected" typeahead="state.address for state in states | filter:$viewValue" />
            </div>
        </form>
    </div>
</div>

有任何想法吗？

是否可以在angular-ui中关闭模态指令的动画？http://angular-ui.github.io/bootstrap/

在选项中找不到任何内容.我应该修改源吗？或者,当您想要自定义时,是否有最佳实践？

我有一个连接到角度的表单,使用它进行验证.我能够使用ng-show指令显示错误消息,如下所示:

<span ng-show="t3.f.needsAttention(f.fieldName)" ng-cloak>
    <span ng-show="f.fieldName.$error.required && !f.fieldName.$viewValue">
        This field is required.
    </span>
</span>

.. f表单在哪里,t3来自表单上的自定义指令,用于检测是否尝试提交,并包含用于检查字段有效性的函数.

我想要完成的是在popover中显示验证消息.无论是bootstrap的原生popover,还是来自UI Bootstrap的popover ,我都加载了.我也可以考虑AngularStrap,如果使用该lib更容易.

我现在正在努力的是一般的弹出窗口的性质 - 它们基于点击,鼠标中心,模糊等用户事件自动显示.我想要做的是显示和隐藏基于相同的弹出窗口上面的ng-show属性中的函数.因此,当表达式返回false时隐藏它,当它返回true时,显示它.

我知道bootstrap有这个.popover('show'),但是我不应该告诉有关dom的任何角度,所以我不确定如何访问$(element).popover()if在自定义表单控制器功能中执行此操作.我错过了什么吗？

更新

重复投票中提到的解决方案仍然只显示mouseenter上的popover.我想强制它显示,好像在做$('#popover_id').popover('show').

编辑:本文末尾的快速和肮脏的解决方案

我正在使用AngularUI-Bootstrap中的模态窗口,就像在网站上解释的那样,除了我分割文件.因此我有:

CallingController.js:

$scope.delete = function () {
    if ($scope.selected.length > 0) {
        // [...]
        // preparing data
        // [...]
        var modalInstance = $modal.open({
            templateUrl: 'views/modalView.html',
            controller: 'modalCtrl',
            resolve: {
                itemArray: function () {
                    return $scope.selected;
                }
            }
        });
        modalInstance.result.then(function (confirm) {
            if (confirm === true) {
                // [...]
                // treat
                // [...]
            }
        });
    }
};

modalController.js:

myAppControllers.controller('modalCtrl',
    function ($scope, $modalInstance, itemArray) {

        $scope.accept = function () {
            $modalInstance.close(true);
        };

        $scope.reject = function () {
            $modalInstance.close(false);
        };

        $scope.itemArray = …

在AngularJS UI Bootstrap中我想在单击面板标题时激活isopen,但我找不到方法.此版本仅在您单击链接时激活.

这是我尝试过的;

<accordion-group is-open="isopen">
    <accordion-heading ng-click="isopen=!isopen">
        I can have markup, too! 
        <i class="pull-right glyphicon" 
           ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
    </accordion-heading>
    This is just some content to illustrate fancy headings.
</accordion-group>

ng-click ="isopen =!isopen "

这是我在Plunker上尝试的链接

AngularJS UI Bootstrap

提前致谢..