我在同一个Web应用程序中使用angular-ui和bootstrap,在尝试使用ui-select2组件时我遇到了一个问题:一切正常,除了在下拉列表中选择一个元素时它没有显示在虽然ng-model关联变量已正确更新,但它显示为空.如果我从主页面中删除了包含bootstrap.js文件,这种奇怪的行为就会消失.是否有人同时使用angular-js和bootstrap和/或谁知道任何调整申请让他们一起工作？
更新:
ui-select2组件位于input-append div中,只需删除div即可解决问题.我创建了角的UI用户界面,选择2原沙箱演示的一个分支在这里.您可以转到"版本2"示例,并检查在列表中选择值是否正确更新模型但不更新输入元素.
我正在使用角度UI路由器,我想知道是否有人知道在使用时是否未解决的承诺resolve会泄漏.我们的用例是,在某些状态下,我们需要进行一些检查,然后在原始状态加载之前转换到不同的URL.
我们处理这个的方式是进行检查并使用$location内部切换url resolve并留下未解决的承诺.未解决的承诺用于防止原始状态的控制器和模板加载(否则它们会抛出错误).
所以我的问题是,这种留下未解决的承诺的做法会导致泄漏吗？我意识到另一种选择是$timeout为解决承诺设定一个长期,但如果没有必要,我想避免它.
javascript memory-leaks angularjs angular-ui angular-ui-router
在这里使用此代码:plunkr
如何在点击控制台上写入值？似乎这只会在表单提交环境中起作用,但我希望我错了.
请注意,rating元素在span中被转换为多个i元素,并且每个i都已经应用了ng-click.
总结 - 当我选择一个星形时,将选择的值吐出到控制台.
我对角度ui-router模块有很多疑问.在使用那个应用程序实现我的应用程序之前,我试着很好地理解它,但即使是简单的事情我也有问题.
<!doctype>
<html ng-app='myapp'>
<head>
<title>main</title>
<meta charset="utf-8">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<!--controller-->
<script src="app.js"></script>
<script src="controller.js"></script>
<!-- endbuild -->
</head>
<body>
hi
<div ui-view="view1"></div>
<div ui-view="view2"></div>
</body>
</html>
var app=angular.module('myapp',['ui.router'
]);
app.config(function($stateProvider/*,$urlRouteProvider*/){
//$urlRouteProvider.otherwise("view1");
$stateProvider.
state('father',{
abstract:true,
template:'<div ui-view></div>',
controller:function($scope){
$scope.view='hi';
}
}).
state('son',{
parent:'father',
url:'/',
views:{'view1':{
templateUrl:'view1.html'
},
'view2':{
templateUrl:'view2.html'
}
}
})
})
这是我的js plunker http://plnkr.co/edit/hsEFKhpaGkIkzarQiuQQ?p=preview.现在问题:
1)正如你在index.html中看到的那样没有出现,我的第一个目的是在主窗口中看到两个视图
2)我已经构建了一个抽象状态来将$ scope.view传递给所有孩子的状态,但似乎它也不起作用
3)如果我想做的事情是以错误的方式完成的,那么更好的做法是什么？
如何在大尺寸上调整角度ui bootstrap模式它看起来它不起作用？通过doc页面,它足以添加大小属性https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs,当我尝试添加size ='lg'时(使用ui-bootstrap)版本0.10.0)进入example.js在官方页面的plunker中打开函数它不起作用http://plnkr.co/edit/lNqi9T8HRUHzcleY68KB?p=preview
我需要使用一个dropup菜单.这段代码与ui-bootstrap-tpls-0.10.0.js完美配合:
<div class="btn-group dropup">
<button type="button" class="btn btn-default" ng-click="print('PDF')">{{text}}</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="print('PDF')">Pdf</a></li>
<li><a ng-click="print('EXCEL')">Excel</a></li>
</ul>
</div>
升级到ui-bootstrap-tpls-0.11.0.js后,dropup弹出窗口不再显示.任何帮助赞赏.下拉列表仍然按预期工作.
我正在使用ui-calendar(女巫基于fullCalendar),默认持卡时间= '00:30:00'.我想把它改成'00:15:00'.
我的配置对象:
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
duration: '00:15:00',
slotDuration: '00:15:00',
header:{
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize
}
};
我为此创建了一个plunker:http://plnkr.co/edit/5nk4BnYoO52En7P6kPu9
选择选项,但是当您选择一个时,ui-select保留为空白.潜在的重要说明:我在指令(ui-bootstrap)中使用它.作为旁注 - 在plunker中没有包装指令,所以这不是罪魁祸首.
<ui-select search-enabled="true" ng-change="updateMedu()" style="width: 100%" ng-model="medications.chosenMedications.metadata.conceptGroup.conceptProperties">
<ui-select-match placeholder="Please click to choose or start typing dosage value..">{{$item}}</ui-select-match>
<ui-select-choices repeat="cp in medications.chosenMedications.metadata[key].conceptGroup[1].conceptProperties | filter: $select.search">
{{cp.synonym}}
</ui-select-choices>
</ui-select>
手动模拟数据集:
$scope.medications.chosenMedications.metadata = [
{
conceptGroup: [
{
conceptProperties: [
{synonym: "Item One"},
{synonym: "Item Two"},
{synonym: "Item Three"}
]
},
{
conceptProperties: [
{synonym: "Item A"},
{synonym: "Item B"},
{synonym: "Item C"}
]
}
]
}
];
我想在我的项目中添加下拉菜单,并从示例中获取代码.下拉显示在示例中,但是当我点击它时没有任何反应.
<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);
}; …我正在使用https://github.com/angular-ui/ui-select用于我正在处理的网站.目前代码如下:
<ui-select ng-model="model.states">
<ui-select-match placeholder="State">
{{$item.Name}}
</ui-select-match>
<ui-select-choices repeat="item.Code as item in statesArray | filter:$select.search">
{{item.Name}}
</ui-select-choices>
</ui-select>
当我在输入字段中输入任何内容时,例如"a",ui-select-choices显示包含"a"的所有字段(默认情况下).我想要做的是,我想显示所有以"a"开头的州.如果输入框中未输入任何内容,则按字母顺序显示所有字段.有人可以提出解决方案吗？我看过其他一些帖子,但还没有人回答这个问题.提前致谢.
这是一个例子,假设州阵列有加利福尼亚州,康涅狄格州,阿拉斯加州,亚利桑那州,纽约州等州.
如果输入字段中没有输入任何内容,则下拉列表应显示阿拉斯加州,亚利桑那州,加利福尼亚州,康涅狄格州,纽约州(可以使用orderBy过滤器实现).
如果用户在输入字段中键入"a",则下拉列表应显示亚利桑那州,亚利桑那州,并且没有其他字段,因为阿拉斯加州和亚利桑那州只有以"a"开头的字段.如果用户键入"c",则下拉列表应显示康涅狄格州加利福尼亚州.如果用户键入"ca",则下拉列表应仅显示加利福尼亚,因为它仅匹配给定的输入字符串.