标签: angular-ui-bootstrap

这个问题与我问的另一个问题有关。

我已经设法让 AngularUI Typeahead 正常工作。但是，我的 orderBy 过滤器似乎没有执行任何操作。

此选择框正确排序所有内容（距离是自定义函数）：

<select ng-model="fromStation"
ng-options="item.name for item in stations.station | orderBy:distance">

但是这个提前输入：

<input type="text" ng-model="fromStation" 
typeahead="item as item.name for item in stations.station 
| filter:$viewValue | limitTo:8 | orderBy:distance">

根本不改变顺序（即它仍然按字母顺序排序）。我想要实现的是，当用户输入火车站的第一个字母（在本例中）时，距离他最近且包含该字母的车站将首先出现。是否可以实现此功能，或者此功能尚不可用？

我在我的项目中使用了角度下拉指令。我想使用键盘（向上/向下键）在下拉列表中的项目中向上/向下移动。如何实现这一目标？

我一直在玩这个错误，但我似乎无法弄清楚。当我推送我添加到 prod 服务器的 angular-bootstrap 模型时，问题就开始了。原来的错误是这样的：

“AngularJS 错误：未知提供者：aProvider <- a”

我很确定我收到了那个错误，因为我的文件没有正确缩小。所以我浏览了我的控制器，发现我没有$injecting $modal实例到我的控制器中，那是我遇到这个问题的时候。

每当我$modalInstance以缩小格式注入我的控制器时，我都会收到此错误。我没有使用 angular-bootstrap 建议的格式，因为我有很多事情要做，而且我正在构建的站点上有很多控制器，所以我将所有东西组合成一个控制器，而不是几个功能。

我的控制器：

.controller('CreateGroupCtrl', ['$scope', '$http', '$window', '$cookies', '$modal', '$log', 'FeedService', '$modalInstance', 
function CreateGroupCtrl($scope, $http, $window, $cookies, $modal, $log, $modalInstance, FeedService) {
$scope.createGroupCall = function createGroupCall(teacher, name) {
    if(teacher != null && name != null) {
            FeedService.createGroupCall($cookies.token, $window.sessionStorage.user, teacher, name).success(function(data) {
            console.log('GroupCreated');
        }).error (function(status,data,token) {
            console.log(status);
            console.log(data);
        });
    } else {
        alert("Error!");
    }
}

/***********ANGULAR-UI MODAL CODE**********/
$scope.open = function (size) {
    var modalInstance …

我正在尝试将 angular-ui-mask 与 angular-ui-bootstrap datepicker 组件一起使用。

当我使用它时，即使日期是有效日期并且日期在我离开该领域后被清除，输入也会被分配 ng-invalid-date 类。

我不想使用 HTML 输入，type='date'因为并非所有浏览器都支持它。

plunker 同样：

http://plnkr.co/edit/dW4AIlF37CLbSHf553d3?p=preview

  <input type="text" class="form-control" ui-mask="99/99/9999" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

检查元素以查看分配给它的类。

我在这里有一个关于我的问题的工作示例：http : //plnkr.co/edit/vwZS5e?p=preview

这是问题范围：

<div class="test-container">
    <span uib-popover="Test"
          popover-placement="top"
          popover-trigger="mouseenter"
          popover-append-to-body="true">
        MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe
    </span>
</div>

当我将鼠标悬停在它上面时，我试图在此跨度的中心上方显示一个弹出框。当文本太长时，我使用文本溢出来切断我的文本。但似乎 uib-popover 并没有考虑到溢出.. popover 出现在右边太远了。

这是我的CSS：

.test-container {
    text-overflow:ellipsis; 
    overflow:hidden; 
    width:100px; 
    border:1px solid red; 
    margin-top:50px; 
    margin-left:50px;
}

我知道我可以将弹出框放在测试容器 div 上，但我更希望弹出框位于跨度的中心。

有没有人知道如何解决这个问题？

我正在尝试为日期创建标签。我还想要一个选项卡，单击它会添加另一个选项卡。

这是我的一些代码

`<uib-tabset justified="true" class="ui-tab">
<uib-tab ng-repeat="date in dates track by $index" heading="{{date.date}}" ng-click="changeDay($index)" ui-on-drop="dropPlaceOnDate($data, $index)">
</uib-tab>
<uib-tab select="addDayToPlaylist()">
<uib-tab-heading>
<i class="glyphicon glyphicon-plus"></i>
</uib-tab-heading>
</uib-tab>
</uib-tabset>`

其中日期 = {date: "someDate", active: false}。

问题是，当我在 HTML 中运行它时，我注意到 uib-tabset 的活动未设置为第一个选项卡索引，而是对作为静态选项卡的最后一个选项卡处于活动状态。

当我移除静态部分时

`<uib-tab select="addDayToPlaylist()">
<uib-tab-heading>
<i class="glyphicon glyphicon-plus"></i>
</uib-tab-heading>
</uib-tab>` 

从代码中，然后它将恢复显示第一个选项卡索引。

从调试看来，它具有日期为索引 =1 的 ng-repeat 和我的静态选项卡为索引 = 0。

我如何使加载时的活动选项卡成为我的 ng-repeat 中的第一个对象。此外，我想跟踪活动索引，以便当我单击静态选项卡时，它会转到 index-1 选项卡。

我是 Angular 的新手并试图实现一个模态。关闭/关闭模态时出现问题 - 当我单击取消按钮时，没有任何反应。这是控制器代码：

angular.module('navApp')
    // Passing the $modal to controller as dependency
    .controller('HomeCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
        $scope.title = "Hello, Angm-Generator!";
        $scope.open = function () {
            var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalCtrl'
            });
        };
    }])

    .controller('ModalCtrl', function ($scope, $uibModalInstance) {
        // Added some content to Modal using $scope
        $scope.content = "ModalCtrl, Yeah!"
        // Add cancel button
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    })

这是实际模态的模板视图

<!-- Modal Script -->
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header"> …

我有一个带有两个角度 ui 选项卡的网页。我在此页面中添加了一个新按钮，并且我想添加此按钮单击行为：单击按钮时，将选项卡交换到另一个选项卡。

例如：

• 如果当前活动选项卡是“第一个” - 使“第二个”选项卡处于活动状态。
• 如果当前活动选项卡是“第二个” - 使“第一个”选项卡处于活动状态。

这是我的（非）工作示例：http : //plnkr.co/edit/2ajxz7oGYmF8oPlHc8kc

<uib-tabset type="pills" active="selected">
  <uib-tab heading="First" index="1">
    First data
  </uib-tab>
  <uib-tab heading="Second" index="2">
    Second data
  </uib-tab>
</uib-tabset>

我很确定我的问题之一取决于active="selected"细分市场。这是因为我期望变量将被放置在 上$scope，而它在分离的范围（选项卡集）上运行。我试图通过将此段更改为active="$parent.$parent.selected"-来解决此问题，但没有成功。

所以，主要问题是swap()函数：

  $scope.swap = function() {
    alert($scope.selected);
    if ($scope.selected == 1)
      $scope.selected = 2;
    else
      $scope.selected = 1;
  }

我该怎么做才正确？

我在CodePen 中创建了一个简单的表单。在required上验证name领域工作得很好。但是，我想在两个字段之间添加一点填充，并在应该显示错误消息时...填充该空白（意思是，下面出现错误消息的字段不会被推下）。相反，它不断向下推字段以为错误腾出空间。当错误被修复时，该字段被拉回。

我想要这样的东西：

我试过设置位置，.errorMessage但这没有任何改变。

.errorMessage{
        position: relative;
        //position: absolute;  <--I've tried this, too
    }

我做错了什么？

在我的 angular 4 应用程序中，来自 ng-bootstrap 的 ngbDropdown-Element 不起作用。

我已经为这种情况安装了以下 npm 模块：

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "bootstrap": "4.0.0-alpha.6", "bootstrap-sass": "^3.3.7",

我的 app.module.ts 看起来像这样：

import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";

import { AppComponent } from "./app.component";
import { FileitHeaderComponent } from "./fileit-header/fileit-header.component";
import {TranslateModule} from "ng2-translate";
import { CCACampaignComponent } from "./cca-campaign/cca-campaign.component";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";


@NgModule({
  declarations: [
    AppComponent,
    FileitHeaderComponent,
    CCACampaignComponent
  ],
  imports: [
    BrowserModule, …