标签: angular-ui-bootstrap

嗨，我有一个输入字段，它在按下 Tab 键时调用函数 add_plu()。尽管它有效，但它会移动到页面的下一个元素（Tab 键的默认操作）。

如何防止选项卡按钮的默认行为？这是我的代码：

   <input class="order-input-plu form-control" ng-model="order.orderwindow.add_field" ui-keydown="{ 'tab':'add_plu(order.orderwindow.add_field)'}">

我将 Angular ui-bootstrap 用于手风琴和面板标题，我还需要checkbox，它是由 ui-bootstrap 在锚标记内生成的。它看起来像这样（复选框在里面<label>，因为样式的原因）：

<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
   <span>Some headline</span>
   <label class="checkbox-toggle-btn">
      <span>Activate</span>
      <input data-ng-model="selected[service.name]" type="checkbox" ng-checked="selected[service.name]">
      <i></i>
   </label>
</a>

通过单击复选框 ( <label>)，它的行为不像复选框，而是<a>被单击并展开手风琴。

<a>如果在里面单击，如何防止默认标签行为<label>？我可以在标签上使用指令并访问父元素吗？

我正在使用bootstrap treeview。出于某种原因，甚至叶节点都有展开/折叠图标。我只想为非叶节点显示展开/折叠图标？

我正在使用以下配置：

  $('#tree').treeview({data: scope.tree, showCheckbox: true});
  $('#tree').treeview('collapseAll', { silent: true });

我确信必须有一个配置来启用禁用树视图中叶节点的展开/折叠图标。

当我使用 ui.bootstrap.modal 时出现此错误：

Error: $uibModal is undefined

模块：

    (function(angular) {
    /**
     * finanziarioTerziController
     *
     * a controller defined in the finanziarioTerziModule and using a sample service.
     */
    angular.module('finanziarioTerziModule')
        .controller('finanziarioTerziController', ['$scope', 'finanziarioTerziService', function ($scope, finanziarioTerziService) {
            'use strict';

            $scope.elencoPatrimonioTerziCollapsed = true;
            $scope.elencoPatrimonioTerzi = new Array();

            $scope.products = [];

            $scope.productToAdd = [];

            $scope.saveProduct = function (productToAdd) {
                for (var i = 0; i < productToAdd.length; i++) {
                    $scope.products.push(productToAdd[i]);
                    console.log($scope.products[i]);
                }
                $scope.reset();
            };


            $scope.reset = function () {
                $scope.productToAdd.length = 0;
            };

            $scope.remove …

我正在开发一个 AngularJS 应用程序。

在我的 index.html 中，在 body 标签的末尾，我声明：

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

我在 angular.module 中包含了 'ui.bootstrap'

在我的 html 中，我尝试使用 uib-accordion

<div id="Help" uib-accordion-group is-open="main.openHelp">
    <uib-accordion-heading>
        <span >
            Help
        </span>            
        <span>
            <i class="pull-right fa" ng-click="main.openHelp = !main.openHelp" ng-class="{'fa-chevron-down': main.openHelp, 'fa-chevron-left': !main.openHelp}"></i>                    
        </span>
    </uib-accordion-heading>
    <div class="row">
        <div>
             Useless Content
        </div>
    </div>
</div>

这工作正常，我可以打开/关闭它等等......

问题是我记录了一个错误：https : //docs.angularjs.org/error/$compile/ctreq?p0=uibAccordion&p1=uibAccordionGroup

我不明白我应该怎么做才能解决这个问题。

顺便说一句，由于我在此页面中多次使用 uib 手风琴，因此多次记录此错误。（我有不同的 <div uib-accordion-group ></div>标签）

我的代码中有一个来自第三方库的 angular-5 下拉组件，这个组件有自己的 CSS，由于它的默认行为，我无法更改它的 CSS（这里我试图减少下拉的宽度），我试过了也使用编写另一个 css 类和内联样式，但它不会改变宽度。

HTML 代码，我已经控制了我的代码：（第 3 方下拉组件）

    <test-dropdown id="dropdown" label="Options Array"
              [selectedOption]="dropdownOptions[0]">
           <test-option *ngFor="let option of dropdownOptions"
              [option]="option" [disabled]="option.disabled">{{option.label}}  
           </test-option>
    </test-dropdown>

上面的下拉组件，在浏览器中运行应用程序后看起来像，

    <test-dropdown _ngcontent-c4="" id="dropdown" label="default" ng-reflect-label="default">
  <div class="test-dropdown" ng-reflect-ng-class="[object Object]">
    <label>DropDown</label>
    <div>
      <button class="select">Select...</button>
      <div class="dropdown">
        <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
  }-->
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option One
          </button>
        </test-option>
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option Two
          </button>
        </test-option>
        <!--bindings={}-->
      </div>
    </div> …

我已使用以下步骤将引导程序包含到我的 Angular 项目中

1. 使用 cli 创建角度项目
2. npm 安装 bootstrap@3 jquery --save
3. 然后像平常一样将脚本和样式路径添加到我的索引文件中

该样式未应用于我的页面。还有什么我必须做的吗？我正在从索引页添加 HTML 代码片段

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project</title>
  <script  src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>ewreeew</h1>
    <button class="btn btn-primary">Test Button</button>
  <app-root></app-root>
</body>
</html>

节点：8.11.2

操作系统：win32 x64

角度：6.0.5

...动画、常见、编译器、编译器-cli、核心、表单

... http、语言服务、平台浏览器

...平台浏览器动态、路由器

套餐版本

@Angular-devkit/架构师 0.6.8

@Angular-devkit/build-Angular 0.6.8

@Angular-devkit/构建优化器 0.6.8

@Angular-devkit/核心 0.6.8

@angular-devkit/schematics 0.6.8

@角度/cli 6.0.8

@ngtools/webpack 6.0.8

@schematics/角度0.6.8

@schematics/更新0.6.8

rxjs 6.2.1

打字稿 2.7.2

网页包 4.8.3 …

我有一个简单的文本字段,使用typeahead与数组的结果.我想限制用户输入只能在数组中输入/选择结果.

如果我的数组看起来像这样:

['alison','bentley','christopher'];

用户可以键入'ali',或者'topher',但最终,预先输入应该选择当前突出显示的内容(如果输入模糊)或用户选择.

但是,用户不应该键入'z',因为它与数组中的任何内容都不匹配.它根本不应该让他们输入.

这是否已经存在,或者我是否需要创建自定义指令？我搜索了其他类似的问题,但它们并不完全相同.

我尝试过使用typeahead-editable,因为我认为这就是我所需要的,但它阻止了预先完成工作.在bootstrap网站上,它将其描述为 "Should it restrict model values to the ones selected from the popup only?"我做错了什么？

这是一个plunker:

如果删除typeahead-editable,基本预先应该可以工作.

在文档中uib-datepicker有一个名为的选项template-url

<-- https://angular-ui.github.io/bootstrap/#/datepicker -->

这是内容:

<div ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
<uib-daypicker ng-switch-when="day" tabindex="0"></uib-daypicker>
<uib-monthpicker ng-switch-when="month" tabindex="0"></uib-monthpicker>
<uib-yearpicker ng-switch-when="year" tabindex="0"></uib-yearpicker>
</div>

但我需要修改"uib-daypicker"中的模板; 我尝试复制模板,datepicker/day.html但它不起作用,因为它是一个指令...所以,我该怎么办？

问题背景：

我正在学习AngularJS。我创建了一个简单的应用程序，该应用程序接受3个表单输入，并在提交此表单时显示了分页列表。我对UI-Bootstrap有依赖性。这是一个Plnkr，它显示了我尝试合并到我的应用程序中的分页示例：http ://plnkr.co/edit/81fPZxpnOQnIHQgp957q?p=preview

问题与演示：

到目前为止，这是我在CodePen上的代码的链接：

http://codepen.io/daveharris/pen/NNMQyy

我有一个在我的SearchingService模型中填充的1000个项目的列表，该列表已注入并在两个控制器之间共享。

ng-repeat当模型searchingService.searchList上的列表SearchingService更改时，我无法进行分页填充，就好像$scope.Watch未触发一样。

深入了解此问题的任何帮助将不胜感激。