标签: angular-ui-bootstrap
UI Bootstrap Datepicker Popup 不适用于 Modal 和 ControllerAs
我在这里看到了一个类似的问题，答案似乎是管理日期选择器是否打开的变量应该在父范围内。我以为我已经在这里完成了，但它仍然无法正常工作。我的代码与我见过的所有其他代码之间的区别在于，我使用的是控制器，而其他所有人都在使用 $scope。这应该如何与控制器一起使用？
这是主页面
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js" data-semver="1.4.6"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<button class="btn btn-primary" ng-click="main.openModal()">Open Modal</button>
</body>
</html>
这是模态
<div class="modal-header">
{{modal.title}}
</div>
<div class="modal-body">
<p class="input-group">
<input type="date"
class="form-control"
ng-model="modal.dt"
is-open="main.opened"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="main.opened = true">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div> …javascript angularjs angular-ui-bootstrap bootstrap-modal bootstrap-datepicker
推荐指数
解决办法
查看次数
如何在另一个内部创建徽章？
我提交了一张在另一个徽章内带有徽章的图像，我想弄清楚他们是怎么做到的？
推荐指数
解决办法
查看次数
专注于关闭模态框或弹出窗口
我有一个关于可访问性的问题。单击按钮或链接即可打开多个图层/模式或弹出窗口。
我需要将焦点保留在单击以打开模式或弹出窗口或弹出窗口的原始元素上，一旦关闭，焦点应返回到单击的元素。
目前，当我在关闭模式窗口或浮出控件后在页面上单击选项卡时，焦点从开始处开始
我正在使用角度引导模式和通过角度状态提供程序配置打开的自定义弹出窗口。
javascript accessibility angularjs uiaccessibility angular-ui-bootstrap
推荐指数
解决办法
查看次数
$uibModal close($value) 回调总是返回 undefined
从我的模板中，我ng-click="$widget.addItem()"用来触发$uibModal.
一切正常，打开，关闭等。
问题是，我无法让$modal.close($value)回调值起作用。该函数本身工作正常，模态关闭，并调用 promise 成功函数。问题是，它总是返回undefined.
组件控制器
app.component('list', {
templateUrl: 'widgets/list.html',
controllerAs: '$widget',
controller: function($uibModal) {
// Add item through modal
this.addItem = function() {
// Init and open $uibModal
var modalInstance = $uibModal.open({
component : 'modalAddItem',
size : 'md'
});
// $uibModal promise
modalInstance.result.then(function(params) {
console.log(params)
// ---> undefined
});
}
}
}
模态模板
<div class="modal-add-item">
<div class="modal-body" id="modal-body">
// Some template stuff here
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-default" ng-click="$modal.ok()">Ok</button> …推荐指数
解决办法
查看次数
UI Bootstrap Datepicker 弹出日期格式
我正在使用 UI Bootstrap Datepicker 弹出窗口，并且我想使用自定义日期格式。我的休息服务以“dd/MM/yyyy”格式向我发送日期。我想使用这种格式，但在更改模型值时，日期选择器不会更新。我定义了uib-datepicker-popup="dd/MM/yyyy"但似乎不起作用。
笨蛋：https://plnkr.co/edit/SfSXmeL0ue0yef1yTKMO? p=preview
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = '02/01/2017';
};
$scope.clear = function() {
$scope.dt = null;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.popup1 = {
opened: false
};
});<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
.full button …推荐指数
解决办法
查看次数
删除 Bootstrap Table 中一个单元格的边框
我想删除引导表中一个单元格的边框。我尝试在该特定单元格上放置一个 id，并在我的 css 中放置：
#borderless-cell { border: 0; }
这似乎不起作用。有任何想法吗？
推荐指数
解决办法
查看次数
尝试关闭模态时可能未处理的拒绝
我的模态上有一个取消按钮，并且有一个点击功能，可以调用：
onCancelClick: function () {
$uibModalInstance.dismiss()
}
它的工作，但犯了这个错误：
可能未处理的拒绝：
undefined
或者当点击esc键时：
可能未处理的拒绝：按退出键
我知道我可以在我的配置中使用以下代码并关闭这些类型的错误：
app.config(function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
});
但我想解决它。你知道我该如何解决这个问题吗？
推荐指数
解决办法
查看次数
引导程序中日期选择器的标题不可见
我创建了一个带有引导日期选择器的角度应用程序的网站。问题是这个日期选择器的标题不可见 - 没有箭头或旋转器来选择月份和年份。html 中的代码如下所示（我只希望标头可见，此时我不关心它的功能）：
<div class="btn-group mb-3 mr-3 ">
<input class="form-control "
name="datepicker"
ngbDatepicker
#datepicker="ngbDatepicker"
[autoClose]="'outside'"
(dateSelect)="onDateSelection($event)"
[displayMonths]="2"
[dayTemplate]="t"
outsideDays="hidden"
[startDate]="fromDate"
[placement]="'bottom'"
type="hidden">
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
<div class="input-group-append ">
<button class="btn btn-outline-dark " (click)="datepicker.toggle()" type="button" placement="bottom" ngbTooltip="{{'raports_by_date' | translate }}"><span class="fa fa-calendar"></span></button>
</div>
<button type="button" class="btn btn-dark no-click" *ngIf="toDate" > {{fromDate.day}}/{{fromDate.month}}/{{fromDate.year}}</button>
<button type="button" class="btn btn-dark btn-sm no-click" *ngIf="toDate" >-</button>
<button type="button" …推荐指数
解决办法
查看次数
Controller中的AngularJS UI Bootstrap Datepicker日期格式不正确
我在我的html页面中使用了一个datepicker,如下所示:
HTML
<div ng-controller="StartDateCtrl">
<label class="control-label" for="startDate"> Date:</label>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" name="startDate" class="form-control" show-button-bar="true" datepicker-popup="yyyy-MM-dd" ng-model="startDate" is-open="opened" min="minDate" max="'22-06-2015'" 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)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
日期采摘控制器
var StartDateCtrl= function ($scope) {
$scope.today = function() {
$scope.travelStartDate = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.travelStartDate = null; …jquery angularjs angular-ui-bootstrap bootstrap-datepicker bootstrap-datetimepicker
推荐指数
解决办法
查看次数
angular-bootstrap 0.12.0 navbar下拉列表不起作用
我正在使用AngularJS 1.3.10以及Bootstrap 3.3.2和angular-ui-bootstrap 0.12.0.我也使用Angular ui-router进行路由.似乎导航栏下拉列表在0.12.0中不起作用.回落到0.11.0有效.这是我正在使用的代码(部分):
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="searchController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a ui-sref="dashboard" class="navbar-brand">My Application</a>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse" collapse="navCollapsed" >
<li ><a ui-sref="dashboard" ng-click="navCollapsed = true"><i class="fa fa-bullseye"></i> Dashboard</a></li>
<li ><a ui-sref="topmenu1" ng-click="navCollapsed = true"><i class="fa fa-list"></i> Top Menu 1</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a ui-sref="item1">Item 1</a></li> …推荐指数
解决办法
查看次数