标签: angular-ui-bootstrap

我正在使用AngularUI的bootstrap库0.4.0.我想制作一个带有可检查标题的标签集,Plunker演示.但是,正如您所看到的,我根本无法选中复选框.任何建议将不胜感激.

我正在使用Angular bootstrap Modal来显示一个弹出窗口.单击textarea/browser back按钮外的退格键,我想取消弹出窗口并继续更改URL.默认行为是模态后面的页面发生变化,但模态仍然位于顶部.

在模态实例的控制器中,我添加了一个

$ scope.$ on('$ routeChangeStart',function(){...});

它工作正常,但每当再次调用控制器时我都会看到错误.再次调用$ modalInstance.dismiss(),但在库中,它会抛出异常.

这是带有代码和repro步骤的plunkr.观察浏览器控制台是否有错误.

http://plnkr.co/UKXa6uFvy0ODHylMj28s

我做错了什么,或者是modal.js中的错误？

编辑:我不认为我的控制器范围是正确的.为什么AddCtrl的$ scope.$ on('$ routeChangeStart'在我导航到MainCtrl时被调用？

我们对此很新.最后设法让ui-Bootstrap使用日期控件: -

<div class="col-md-2 box" ng-controller="ResultFilter" >  
<h2>Filter</h2>

    <p class="input-group" ng-controller="DatepickerDemoCtrl">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.startdate" is-open="opened1" 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, 'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
   <p class="input-group" ng-controller="DatepickerDemoCtrl">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.enddate" is-open="opened2" 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, 'opened2')"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
 <p class="input-group">
    <select class="form-control" ng-model="resultfilter.frequency">
  <option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Yearly">Yearly</option>
</select>
      </p>
</div> …

任何人都可以为我提供这种书架的响应式html/CSS.

删除了狡猾的图像链接

我试图在网上找到同样的架子,但他们没有善良/不敏感

那就是查看更多/更少的按钮.

非常感谢,

在UI Bootstrap 14.3中使用垂直选项卡,如何将内容与选项卡右侧而不是选项卡下方对齐？

<uib-tabset vertical="true" type="pills">
    <uib-tab heading="Vertical 1">Vertical content 1</uib-tab>
    <uib-tab heading="Vertical 2">Vertical content 2</uib-tab>
</uib-tabset>

我试过class="tabs-left"但是没有用.

示例Plunker示例

我试图用ng-options或Typeahead表达式语法找到AngularJS select,但是我找不到整个东西,所以我从这里和那里收集信息,这就是我想出的:

我的手风琴有标题中的链接.它是这样一种方式,当点击标题上的任何地方时,可以打开手风琴.因此,当点击链接时,不会转到该链接(href),而是打开手风琴.

期望的行为:

我想要在标题中的任何地方点击除了链接之外打开该比例.(即,当点击链接时,必须重定向用户并且不得打开手风琴)

<div>
    <accordion close-others="false">
        <accordion-group is-open="isopen" ng-repeat="ele in arr">
            <accordion-heading>
                <div>
                    <i class="pull-right glyphicon"
                       ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
                    <div style="width: 50%; float: left; padding-left: 6cm;">{{ele.a}}
                        <span >
                            <a href="https://www.fb.com">link</a>
                        </span>
                    </div>
                    <div style="text-align: center;">
                        <span>{{ele.b}}</span>
                    </div>
                </div>
            </accordion-heading>
       </accordion-group>
     </accordion>
  </div>

Plnkr

我使用ng-bootstrap替代angular2中的ui-bootstrap.

我的html如下:

<div class="row" style="height: 100%;">
  <div class="col-12">
    <div class="container" id="contentMain">
      <div class="card-my-profile">
        <div class="card-image">
          <div class="image-wrap">
            <div class="image-placholder" data-firstletter="S"></div>
          </div>
        </div>
        <div class="clearfix card-fluid">
          <div class="">
            <h4 class="title-card">Priya</h4>
            <div><span class="item-type">Title:</span> Job title</div>
            <div><span class="item-type">Location:</span> Bangalore</div>
          </div>
          <div class="">
            <div><span class="item-type">Contact:</span> 9876543210</div>
            <div><span class="item-type">Email:</span> priya@gmail.com</div>
            <div><span class="item-type">Experience:</span> 9 years</div>
          </div>
        </div>
        <div class="card-buttons">
          <a href class="btn btn-success btn-rounded text-uppercase">Resume <i class="bi_interface-tick small"></i> </a>
          <div class="text-right">
            <a class="inherit small" href>Update?</a>
          </div>
          <a [hidden]="!isNotUploaded" href class="btn btn-default btn-rounded text-uppercase">Upload CV</a>
          <ul class="list-inline …

我一直关注这里的官方指南,但仍然得到错误.GitHub上的用户经历了同样的问题,但没有提到它是如何解决的,只是他的代码中有一个错误调用他的工厂,我无法从他的plnkr中找出任何东西.

控制器:

function ActivitiesController($scope, $state, $window, Authentication, activity, $uibModal, $uibModalInstance) {
    var vm = this;

    vm.authentication = Authentication;
    vm.activity = activity;
    vm.openModal = openModal;
    vm.okOnModal = okOnModal;
    vm.cancelOnModal = cancelOnModal;

    function openModal() {
        $uibModal.open({
            template: "<div class='modal-header'>"
                        + "<h3 class='modal-title' id='modal-title'>Friends</h3>"
                    + "</div>"
                    + "<div class='modal-body list-group' id='modal-body'>"
                        + "<a ng-repeat='friend in vm.friends' class='list-group-item'>"
                            + "<img class='friend-user-profile-picture' ng-src='{{ friend.friend.profileImageURL }}' alt='{{ friend.friend.displayName }}'>"
                            + "<h4 class='list-group-item-heading' ng-bind='friend.friend.displayName'></h4>"
                            + "<small class='list-group-item-text' ng-bind='friend.friend.username'></small>"
                            + …

点击元素后,我正在执行函数,并且在成功之后,我想查看clicked元素的工具提示.

我在ngRepeat循环中显示了多个带有此工具提示的元素.但是我想只在currentTarget元素(被点击的元素)上更改工具提示.目前我正在显示工具提示作为来自控制器的插值字符串,并且在功能成功之后我正在更改此字符串.这导致带有此工具提示的每个元素都有新的工具提示,而不仅仅是被点击的工具提示.

<div ng-repeat="n in auctions">
    <img src="img/heart_icon.png"
         alt="Dodaj do wishlisty"
         class="category__record-button--wishlist-icon"
         data-ng-if="$parent.authentication.isAuth"
         data-ng-click="addFollowAuction(n.id)"
         uib-tooltip="{{ categoryConfig.followInfo }}"
         tooltip-placement="top"
         tooltip-trigger="'mouseenter'"
         tooltip-append-to-body="true">
</div>

所以categoryConfig.followInfo是这个字符串我上面写着,它是后更改addFollowAuction()功能成功:

$scope.addFollowAuction = function (auctionId) {
    console.log(auctionId);
    auctionsFollowService.addFollowAuction(auctionId)
        .then(function (response) {
            if(response.detail === 'success follow') {
                $scope.categoryConfig.followInfo = 'Pomy?lnie dodano ten przedmiot do wishlisty!';
            }
        }, function (err) {
            console.log('err adding to wishlist ' + err);
        });
};

然后从循环显示的所有图像都有新的工具提示信息,但我只想附加新信息到点击图像.我尝试使用,$event但由于我改变了$scope.categoryConfig.followInfo两种方式,它没有用.

如何仅将新工具提示信息附加到单击元素？