标签: angular-bootstrap

我想在用户单击另一个选项卡时取消选项卡更改/面板切换,并且我发现当前面板中的更改未保存.

我用的是deselect()元素的属性<tab>,记录在这里,火在我的控制器的功能,并在我确定,我不应该改变标签.含义:我不想取消选择此选项并选择用户单击的其他用户.

我怎么能做到这一点？最好是从控制器内部,还是以任何其他方式？

我不能只做$ event.stopPropagation(),因为我这里没有$ event ...我错过了什么？

Plunker隔离问题.

我遇到了angular-bootstrap collapse指令和CSS的问题.基本上,当您将指令"collapse"添加到div时,它可以正常工作.但是当您尝试展开/折叠表格行时,似乎存在转换效果的一些问题.

HTML:

<div ng-controller="dogCtrl">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Breed</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="dog in dogs">
        <td><a href="#" ng-click="isCollapsed = !isCollapsed">{{dog.name}}</a></td>
        <td>{{dog.breed}}</td>
      </tr>
      <tr collapse="isCollapsed" ng-repeat-end="">
        <td colspan="3">
          <h3>Pet details</h3>
          <p>some details about this pet.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

控制器:

var app = angular.module('dogApp', ['ui.bootstrap']);
app.controller('dogCtrl', function($scope) {
    $scope.isCollapsed = true;
    $scope.dogs = [
        {
            name: "Sparky",
            breed: "Parson Russell Terrier"
        }, {
            name: "Shep",
            breed: "German Shepard"
        }
    ];
});

Codepen示例:http://codepen.io/anon/pen/qEoOBq

我正在使用Angular Bootstrap UI,我有一个工作工具提示.

HTML:

<div ng-app="helloApp">
  <div ng-controller="helloCtrl as hello"> 
    <a tooltip-trigger="click" tooltip-placement="bottom" uib-tooltip-html="<h1 ng-click='hello.clickInsideToSeeTheWorld()'>Click again!</h1>">Click me to see the tooltip</a>
  </div>
</div>

使用Javascript:

angular.module('helloApp', ['ui.bootstrap'])

.controller('helloCtrl', helloCtrl)

function helloCtrl() {
  var vm = this;

  vm.clickInsideToSeeTheWorld = function() {alert(123)}
}

当我打开工具提示时,ng-click不起作用.没有警报出现.我的控制台没有收到任何错误.这是因为HTML未编译.如何正确编译工具提示html以使其工作？

我正在尝试实现ui-bootstraps轮播,但是当页面加载时,第一个图像没有显示但控件和指示器没有显示.

然后,当第二个图像显示时,我可以使用控件返回到第一个图像,它将显示正常.我可以使用控件来到最后一张幻灯片或让它自动滑动但是当我到达最后一张幻灯片时,轮播停止工作并给出错误"无法读取未定义的属性'幻灯片'"指向ui的第576行-bootstrap-tpls.js文件.

不知道我做错了,因为这看起来很简单,这里是我的代码,这里是一个链接到一个网站,其中有一个现实的例子.

示例站点

视图

<div class="slider">
  <uib-carousel active="active" interval="3000">
    <uib-slide ng-repeat="slide in home.slides track by slide.id" index="slide.id">
      <img class="img-responsive" ng-src="{{slide.img}}" alt="{{slide.alt}}">
    </uib-slide>
  </uib-carousel>
</div>

调节器

.controller('HomeCtrl', function() {
  var vm = this;

  vm.slides = [
    {id: "1", img: 'img/slider/customer.jpg', alt: 'customers'},
    {id: "2", img: 'img/slider/juices.jpg', alt: 'e-juice'},
    {id: "3", img: 'img/slider/lineup.jpg', alt: 'vaporizers'},
    {id: "4", img: 'img/slider/vapeon.jpg', alt: 'vape on'}
  ];
};

*编辑

我尝试了常规的bootstrap轮播,它工作正常.我可以用它代替解决问题,但我宁愿弄清楚我用ui-bootstrap旋转木马做错了什么.

我正在尝试使用 Bootstrap 4 卡片布局自定义卡片列。但是，如果我在 css 文件中编写此代码，为什么会显示错误？

VS 代码中显示错误：规则@include css(unknownatrules) 处未知

HTML 文件

<div class="card-columns">
  <div class="card" *ngFor="let item of vision">
    <div class="card-header">{{item.heading}}</div>
    <carousel [showIndicators]="false">
      <slide *ngFor="let item of vision">
        <img class="card-img-top embed-responsive embed-responsive-16by9" [src]="item.img" alt="vision image">
      </slide>
    </carousel>
  </div>
</div>

CSS文件

<div class="card-columns">
  <div class="card" *ngFor="let item of vision">
    <div class="card-header">{{item.heading}}</div>
    <carousel [showIndicators]="false">
      <slide *ngFor="let item of vision">
        <img class="card-img-top embed-responsive embed-responsive-16by9" [src]="item.img" alt="vision image">
      </slide>
    </carousel>
  </div>
</div>

我正在使用带有AngularJS指令的bootstrap UI,我想更改默认样式bootstrap适用于其元素.

我应该从模板中定位HTML内容吗？

基于文档中给出的示例,我想使用手风琴.

当我在HTML中定义它时,它具有以下结构:

<accordion>
    <accordion-group heading="my heading">
      content here
    </accordion-group>

但是当指令处理模板时,它会将其转换为以下HTML:

<accordion close-others="oneAtATime"><div class="panel-group" ng-transclude="">
    <div class="panel panel-default ng-isolate-scope" heading="my heading">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
                    <span ng-class="{'text-muted': isDisabled}" class="ng-binding">content here</span>
                </a>
            </h4>
        </div>
        <div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
        <div class="panel-body" ng-transclude=""><span class="ng-scope">some content here</span></div>
    </div>

正如您所看到的,它会非常显着地改变它.如果我想更改面板标题的显示方式,我应该在我的css文件中写这个吗？

div.panel {}

并希望模板将来不会改变？

更改指令模板生成的HTML元素样式的最佳方法是什么？

勾选此PLNKR,我已经实现预输入控制,默认情况下,在未来型控制它们不设置任何最大高度或高度列出,但按规定我必须修复列表的高度110px.因此,当我们一次列出更长的列表时,只会显示4个数据,并且可以通过向下滚动看到休息.用户单击向上/向下滚动箭头时滚动正在工作,但它不能使用键盘向上/向下键.

该问题按步骤解释: -

1. 键入一些东西,即"a",以获取typeahead中的数据(将填充列表)
2. 按向下箭头键(焦点将在列表项上)
3. 按向下箭头键4-5时间进一步向下(当我们向下移动到列表时,滚动不会被移动.)
4. 它始终显示列表中的前4项.理想的行为是应该改变.

用户可以通过手动单击滚动来滚动,但使用箭头键不滚动.

HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
 <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
 <script src="example.js"></script>
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 <link href="style.css" rel="stylesheet">
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
  <h4>Static arrays</h4>
  <pre>Model: {{selected | json}}</pre>
  <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
 </div>
</body>
</html>

CSS

.dropdown-menu{
 height:110px;
 overflow:auto;
}

javascript datalist

$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', …

我正在尝试在我的 Angular 项目中使用 Material Design Bootstrap (MDB)。但是，当我使用 angular bootstrap 组件时，似乎标准 bootstrap 会干扰样式。

从我的 angular 项目中完全删除 bootstrap 以便我的组件仅由 angular bootstrap 设置样式的最佳方法是什么？

编辑

angular.json

"styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
              "src/styles.scss"
            ],

包.json ,

"dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@fortawesome/fontawesome-free": "^5.8.2",
    "@types/chart.js": "^2.7.52",
    "angular-bootstrap-md": "^7.5.2",
    "atom": "^1.1.0",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "rxjs": "~6.3.3",
    "terminal": "^0.1.4",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },

有没有办法获取手风琴组是否开放？我知道有isOpen指令,但我不确定是否有办法在html中访问该状态.使用(和滥用？)双向绑定我可以设置一个变量来保持该状态,但是如果不执行像isOpen0,isOpen1,isOpen2等那样的嵌套手风琴它将无法解决.我也可以使用ng-init来"声明"一个新的isOpen在嵌套手风琴的范围,但这听起来不是一个好主意.

  <accordion>
    <accordion-group is-open="isOpen">
      <accordion-heading>
         <div ng-class="{'myClass': isOpen}">Static Text</div>
      </accordion-heading>
      This content is straight in the template.
    </accordion-group>
  </accordion>

http://plnkr.co/edit/l5y4raei99pedNWcE225

我正在使用angular bootstrap typeahead指令.ng-model当我使用typeahead时,有没有办法选择在my 而不是字符串中设置的整个所选对象？

例如

mycontroller.js

var getStates = function() {
   // calls rest service that pulls in states.json from some angular factory
}
var StateCtrl = function ($scope) {
    $scope.states = getStates();

    $scope.submit = function () {
        // Should expect an Object and not the name of the state
        console.log($scope.states);
    }
}
angular.module('StateCtrl', []).controller(['$scope', StateCtrl]);

states.json

[
// i don't want just state.name i want everything
{name: Alabama, stateCode: 123, salesTax: .06}, 
{name: Arkansas, stateCode: 122, salesTax: …