标签: angular-ui-bootstrap
从AngularUI的Bootstrap Typeahead捕获"更新程序"操作
如何从AngularUI的UI Bootstrap指令中捕获"updater"事件？
我已经定义了我的HTML:
<input type="text" pattern="[0-9]*" class="span6" placeholder="8675309" ng-model="empid" typeahead="entry for entry in httpEmpIdSearch($viewValue, 8)">
......和我的相关功能:
$scope.httpEmpIdSearch = function(query, limit)
{
return $http.get(
'/visitorLog/api/v1/employee/?limit=' + limit + '&empid__startswith=' + query
).then(function(response)
{
output = [];
angular.forEach(response.data.objects, function(value, key) {
this.push(value.bems.toString());
}, output);
return output;
});
}
当用户点击弹出窗口中的ID时,我想采取其他操作(自动填充表单).如果原始Bootstrap我会使用"更新程序":
$('#sampleElement').typeahead({
minLength: 3,
source: function (query, process)
{
// get the data
},
updater: function (item)
{
// user clicked on an item, do something more!
},
});
我尝试了各种各样的听众: …
推荐指数
解决办法
查看次数
使用$ dialog多次打开同一个对话框
我在回答这个问题时创建了这个plnkr'AngularJS - 在对话框中打开控制器(动态加载模板) '.
所有示例应用程序都会基于模板启动一个对话框,并带有自己的控制器.对话框第一次启动时,一切都按预期工作.但是,如果我尝试重新启动对话框,在解除它后,会显示模态背景但没有对话框.在javascript控制台中,您可以看到立即调用then返回的promise上的方法$dialog.open(),但不会删除背景并且不会报告错误.我完全不知所措.
可以在angular-ui bootstrap 文档页面上重复打开和关闭该对话框.
我哪里做错了？
HTML:
<!DOCTYPE html>
<html ng-app="plnkr">
<head>
<link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular.js@1.0.7" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script data-require="ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
JS:
app.controller("DemoCtl", ["$scope", "$dialog", function($scope, $dialog){
$scope.launch = function() {
var d = $dialog.dialog({
backdrop: true,
keyboard: true,
backdropClick: true,
templateUrl: "dialog.html",
controller: "DialogCtl"
});
d.open().then(function(result) { console.log("d.open().then"); });
};
}]);
推荐指数
解决办法
查看次数
无法使用Poltergeist和PhantomJS测试Angular UI Typeahead
我在测试我的输入输入时遇到问题.我正在使用Rails,RSpec,Capybara,Angular UI 0.10,AngularJS,Poltergeist.这是我的测试:
create(:user, name: "Test User")
fill_in 'User', with: "Test"
find('#delegations').find('li.active').click
如果我使用Chrome驱动程序运行它,它会成功运行.但是,当使用Poltergeist运行时,虽然服务器收到请求并相应地返回用户,但未显示建议框.
我认为这fill_in是blur在场上触发,使得盒子消失.我曾经Capybara::Screenshot看过是否有任何建议出现,但没有.输入字段甚至没有得到焦点.
ruby-on-rails phantomjs poltergeist bootstrap-typeahead angular-ui-bootstrap
推荐指数
解决办法
查看次数
如何从angularjs中的控制器调用Ui-Bootstrap 0.10.0中的$ modal.open
如何$modal.open从角度js中的控制器调用.以前在ui-bootstrap中有0.1.0对话框.现在在当前版本中,调用对话框的权限是什么.
在0.1.0中它只是$ dialog.dialog(); 然后调用Dialog(); 在Lib -
return {
// Creates a new `Dialog` with the specified options.
dialog: function(opts){
return new Dialog(opts);
},
// creates a new `Dialog` tied to the default message box template and controller.
//
// Arguments `title` and `message` are rendered in the modal header and body sections respectively.
// The `buttons` array holds an object with the following members for each button to include in the
// modal footer section:
// * `result`: …推荐指数
解决办法
查看次数
模态中的Angular UI Bootstrap datepicker仅在第一次单击时工作
日期选择器似乎只在第一次点击时工作,然后它不会弹出.我猜它与某些交叉变量或函数定义有关,但我无法弄清楚如何修复它.
这是代码:http: //plnkr.co/edit/ridTspMBHE1iphrSobQr？p = preview
HTML
<div ng-controller="ModalDemoCtrl">
<button class="btn btn-info" ng-click="open_modal()">Edit</button>
<script type="text/ng-template" id="notificationInput.html">
<div class="modal-header">
<h3 class="modal-title">My Modal</h3>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="n_title">Title</label>
<input type="text" class="form-control" id="n_title" value="{{selectedNotification.title}}">
</div>
<div class="form-group">
<label for="n_release">Release</label>
<p class="input-group">
<input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<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>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn …推荐指数
解决办法
查看次数
可点击面板内的可点击按钮
我手风琴里面有一个按钮,像这样:
通过这样做,我使整个手风琴头可以点击:
<accordion-heading ng-click="isopen=!isopen">
<div>
<span class="accordion-header">
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': accordionOpen,
'glyphicon-chevron-right': !accordionOpen}"></i>
</span>
<button class="delete-button" ng-click="remove()">Delete</button>
</div>
</accordion-heading>
我遇到的问题是当我单击删除按钮时,调用remove()并打开/关闭手风琴.
当我点击删除按钮时,有没有办法阻止手风琴标题打开/关闭？
推荐指数
解决办法
查看次数
在ui-bootstrap typeahead中处理具有有意义键的对象
Angular ui-bootstrap typeahead是一个很棒的库,我喜欢它模仿Angular select指令中的语法这一事实.似乎这种模仿并不完美.我是否正确地说我不能将此对象用作预先输入的来源？
var myObject=
{
'41': { term: 'cell morphological classification specialist'},
'42': { term: 'classification specialist'},
'43': { term: 'cell electrophysiological classification specialist'},
'44': { term: 'cell morphological reconstruction specialist'},
'45': { term: 'cell electrophysiology recording specialist'},
}
如果我使用angular select指令,我只是使用以下构造来加载此对象作为可能的选项:
select id as details.term for (id , details) in myObject
这是否意味着我必须在我的应用程序中避免使用此类对象并使用此表单？
[
{id: '41', term: 'cell morphological classification specialist'},
{id: '42', term: 'classification specialist'},
{id: '43', term: 'cell electrophysiological classification specialist'},
{id: '44', term: 'cell …推荐指数
解决办法
查看次数
Angularjs bootstrap typeahead无效:错误:[filter:notarray]
我需要使用typeahead进行http调用来获取建议选项
$scope.getlist = function getListofNames(name) {
return $http({
method: 'GET',
url: '/v1/'+name,
data: ""
}).then(function(response){
if(response.data.statusMessage !== 'SUCCESS'){
response.errorMessage = "Error while processing request. Please retry."
return response;
}
else {
return response.data.payload;
}
}, function(response){
response.errorMessage = "Error while processing request"
return response;
}
);
}
response.data.payload是一个对象数组,它已成功获取但我收到此错误错误:[filter:notarray] http://errors.angularjs.org/1.4.5/filter/notarray？
注意:我使用的是角度1.4.5和Bootstrap v3.1.1
twitter-bootstrap angularjs bootstrap-typeahead angular-ui-bootstrap angular-ui-typeahead
推荐指数
解决办法
查看次数
如何使用AngularJS创建5个评级星,第三个星被禁用
我想在用户评价业务时添加约束.用户不应该投票3,因为它是系统给我们数据库的任何新增业务的默认费率.
我使用AngularJS作为前端Javascript库并创建评级栏,我正在使用ui.bootstrap.rating模块.
我想做的是这样的事情(用户点击第四颗星的情况)
我试过的是这个
Html代码
<uib-rating ng-model="rateNumber1" max="2"
state-on="'fullStar'" state-off="'emptyStar'"
aria-labelledby="custom-icons-1"
read-only="false">
</uib-rating>
<uib-rating ng-model="rateNumber2" max="1"
state-on="'thirdStar'" state-off="'emptyStar'"
on-hover="onHoverRatingNumber2()" on-leave="onLeaveRatingNumber2()"
aria-labelledby="custom-icons-1"
read-only="false">
</uib-rating>
<uib-rating ng-model="rateNumber3" max="2"
state-on="'fullStar'" state-off="'emptyStar'"
on-hover="onHoverRatingNumber3()" on-leave="onLeaveRatingNumber3()"
aria-labelledby="custom-icons-1"
read-only="false">
</uib-rating>
为此目的在控制器中创建的Javascript函数
/* rating a business */
$scope.rateNumber1 = 0;
$scope.rateNumber2 = 0;
$scope.rateNumber3 = 0;
$scope.onHoverRatingNumber3 = function () {
$scope.rateNumber1 = 2;
$scope.rateNumber2 = 1;
};
$scope.onLeaveRatingNumber3 = function () {
$scope.rateNumber1 = 0;
$scope.rateNumber2 = 0;
};
$scope.onHoverRatingNumber2 = function () …推荐指数
解决办法
查看次数
滚动条拇指高度在css中
根据可滚动区域,滚动拇指的高度是否设置为默认值？如果没有,我可以设置滚动条拇指高度吗？如果有可能如何？我试着按照以下方式做到这一点.
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
height: 5px;
}
但它对页面没有影响.请帮忙.提前致谢.
推荐指数
解决办法
查看次数