http://angular-ui.github.io/bootstrap/
我想使用bootstrap的typeahead,并在对象中搜索两个不同的键对.如何迭代数组对象？
也有人可以解释这是什么？
typeahead="state for state in states | filter:$viewValue"
该for条款让我失望,似乎真的不清楚因为state for state有相同的名字.
我有一个问题,我认为这与我的指令的隔离范围有关.
一旦从弹出窗口中选择了日期,Angular-UI弹出日期选择器就不会再出现在指令中.
在指令之外,即使选择了日期,弹出窗口也能继续正常工作.
出于演示目的,我使用完全相同的标记和属性来显示弹出窗口,以便两者相互影响.即使blob外部的弹出窗口和日期选择器被删除,也可以看到blob指令中的相同[破坏]行为.
通过具有相同的标记和is-open属性,我们看到当blob中单击日历图标时弹出窗口出现在blob外部,因此该open函数似乎正常工作.一旦通过选择日期解除了对话框中的弹出窗口,它似乎无法重新创建.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<meta name="description" content="Directive Scope" />
<h1>Directive scope testing</h1>
<div ng-app="testApp" ng-controller="TestCtrl">
<blob show="isVisible">
This is the content. We need in the blob directive, <em>unrelated to the issue being demonstrated</em>.
<br/>dt in blob scope: {{dt}}
<hr>
<input type="text" datepicker-popup="d MMM yyyy" ng-model="$parent.dt" is-open="opened" />
<button type="button" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</blob>
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h3>Outside the dialog</h3>
<input type="text" datepicker-popup="d MMM …我正在使用Angular UI Bootstrap模态窗口,当模态窗口出现时,该窗口具有小动画.文档似乎没有禁用此动画的选项.
当模态打开时,如何禁用该动画？
我试图在我的应用程序中使用angular-bootstrap datepicker模块并遇到小问题.我使用输入文本和按钮显示日期,如下所示:
<div class="row" id="datePicker">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="currentDate"
is-open="opened" datepicker-options="dateOptions" date-disabled="disableDt(date, mode)"
ng-required="true" close-text="Close" show-button-bar="false" ng-init="" readonly/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
由于使用有角度的谷歌地图,我必须手动引导我的应用程序.似乎由于手动引导,datepicker无法正确格式化日期并显示整个未格式化的日期.当我从datepicker中选择任何日期时,日期将在输入字段中正确显示.更重要的是,模型更改不会强制格式更改(例如,最初我从json文件获得了一些日期,它们显示在字段中,但没有格式化).示例如下:
有没有办法刷新这个小部件,以便它在开始时知道正确的格式或在适当的时刻更改它以正确初始化？
编辑:当我将datepicker移动到片段时,它应该没有初始化模型的问题(此片段稍后加载).仍然出现问题 - 日期没有格式化,似乎根本没有与格式化程序或模型相关联(例如,在日期选择器中选择日期之前,制作格式下拉列表并选择不同的值,因为教程不起作用).
编辑2解决方案从camden_kid提供的链接工作!:)详细评论.
javascript datepicker angularjs angular-ui angular-ui-bootstrap
我正在试图找出如何设置UI.Bootstrap Typeahead(http://angular-ui.github.io/bootstrap/)仅在从下拉列表中进行选择时设置模型值,并清除该字段没有选择.
如果有一个不同的控制,这样做也会起作用.
Typeahead正在选择一个对象,如果用户只键入几个字符然后离开该字段,则将模型值设置为该字段的字符串值.我显然可以测试这种情况,但修改范围模型值不会刷新表单有效性.因此,如果我有一个必填字段,我还必须将字段的有效性设置为false.
这一切似乎都是某人必须已经想到的很多工作.有什么建议？
编辑
我的另一个想法是,最好的做法是将Typeahead与提交回服务器的范围值分开吗？
我想在我的项目中添加下拉菜单,并从示例中获取代码.下拉显示在示例中,但是当我点击它时没有任何反应.
<form class="form" name="form" novalidate>
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button"
class="btn btn-primary dropdown-toggle"
dropdown-toggle
ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div>
</form>
现在这个html的控制器:
angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
}; …我想通过为单元格添加颜色来指定Angular UI日期单元格的颜色,因此我使用以下内容覆盖默认模板:
<!-- things from pasted default template, here I change something -->
<!-- btn-danger instead btn-info for clicked date, test if I can change anything-->
<!-- call to function from my own controller-->
<button type="button" style="width:100%;" class="btn btn-default btn-sm"
ng-class="{'btn-danger': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)"
ng-disabled="dt.disabled" tabindex="-1">
<span ng-class="{'text-muted': dt.secondary, 'text-info': dt.current,
'text-success': hasEventsCreatedByUser(dt)}">
{{dt.label}}</span>
</button>
那是(目前)我的功能 testController
$scope.hasEventsCreatedByUser = function(date){
return true;
};
从更改btn-info到btn-danger非常容易,它只是粘贴另一个类:)但是我不能在我的控制器中调用方法 - 是否有任何解决方案在Angular UI模板中启用我的控制器调用函数或者我必须以某种方式覆盖默认值DatepickerController？
更详细的描述:用户可以创建具有指定日期的事件.例如,这个想法是使用创建绿色的日期创建单元格
模拟解决方案发现:
我使用"miniController",我只在按钮上添加:
<button ng-controller="miniController" …datepicker angularjs angular-ui angular-ui-bootstrap twitter-bootstrap-3
我有这个简单的选项卡面板:
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
{{tab.content}}
</tab>
</tabset>
</div>
而这个简单的控制器:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope) {
$scope.tabs = [
{ title:'Dynamic Title 1', content:'/tab1.html' },
{ title:'Dynamic Title 2', content:'Dynamic content 2'}
];
});
我的问题是我希望标签1从.html文件中获取其内容,而不是从静态数组中获取.有没有办法实现这个目标？如果它可以在某些用途这里是我的plunker:http://plnkr.co/edit/mFkI7oDIeamqd444wlqr
我试图用popover创建一个指令.
我想为此使用ui.bootstrap.不幸的是它没有任何显示.这是一个带有例子的plunker.
<div>
Popover uib (notworking- uib-popover-html) ->
<div mydirectiveuib ng-model="name"></div>
</div>
app.directive('mydirectiveuib', function(){
return{
restrict: 'EA',
replace: true,
scope: {
ngModel: '='
},
template: ' <span class="test">aaa<img popover-trigger="mouseenter" popover-placement="right" uib-popover-html="<h2>{{ngModel}}</h2>" width="20" height="20" src="http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/48/Folders-OS-Info-Metro-icon.png" alt="info icon" /></span>',
link: function(scope, iElement, iAttrs) {
}
};
})
如果我将uib-popover-html更改为仅popover它正在工作.
<div>
Popover (working) ->
<div mydirective ng-model="name"></div>
</div>
app.directive('mydirective', function(){
return{
restrict: 'EA',
replace: true,
scope: {
ngModel: '='
},
template: ' <span class="test">aaa<img popover-trigger="mouseenter" popover-placement="right" popover="<h2>{{ngModel}}</h2>" width="20" …我在angular2项目中工作,想知道有什么方法可以在angular2中使用uib-tabset吗？
我之前使用过angularjs,我可以使用ng-bootstrap.
所以我可以<uib-tabset></uib-tabset>轻松使用.
但我不确定如何在angular2中这样做？任何输入？