标签: angular-ui-bootstrap
如何创建 Angular JS ON-OFF 开关
我正在尝试通过参考链接创建 ON-OFF 开关
在这里，我无法在 index.html 文件中使用 FontAwesome 引用，我所做的是在我的项目中复制了 font-awesome-css 文件。但是开关ON-OFF按钮没有显示。
在这里，我从 index.html 中删除了引用，并将 font-awesome.min.css 的内容复制到我的 style.css 文件中我的要求是根据模型值（布尔值）创建 ON-OFF 开关。
它应该有编辑（开/关）功能。
任何人都可以建议为什么 css 文件不起作用，或者我还有其他方法可以做到这一点。
css angularjs toggleswitch angular-ui-bootstrap fontawesome-4.4.0
推荐指数
解决办法
查看次数
如何将导航项目的方向从 ltr 更改为 rtl？
我有以下引导程序代码，需要在不使用引导程序-rtl 的情况下将导航中项目的方向更改为从右到左而不是从左到右（使项目 1 从右起第一个），我也尝试在 ul 中使用 direction:rtl 但没有用。
作为结论，我需要这个形状
有什么帮助吗？
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="logo"><a href="#"><img src="img/logob.png" alt=""></a></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle fl7" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li> …推荐指数
解决办法
查看次数
AngularJS UI Bootstrap"btn-radio"指令不起作用
任何人都可以解释为什么前两个按钮组工作,但第三个按钮组不工作？
<div class="btn-group">
<button ng-repeat="company in companies"
class="btn"
ng-model="radioModel.id"
btn-radio="company.id">
{{company.name}}
</button>
</div>
<div class="btn-group">
<button class="btn btn-two"
ng-model="radioModel.id"
btn-radio="2">
two
</button>
<button class="btn btn-two"
ng-model="radioModel.id"
btn-radio="3">
three
</button>
</div>
<div class="btn-group">
<button ng-repeat="company in companies"
class="btn btn-{{ company.name }}"
ng-model="radioModel.id"
btn-radio="company.id">
{{company.name}}
</button>
</div>
$scope.companies = [ { id: 2, name: "two"}, {id: 3, name: "three"} ];
$scope.radioModel = { id: 3 };
此示例使用AngularUI Bootstrap 0.5.0.如果我将其更改为0.3.0,一切都按预期工作.
推荐指数
解决办法
查看次数
angularjs在控制器之间共享数据配置
我想知道什么是在控制器之间共享指令的好方法.我有两个指令在不同的控制器中使用不同的配置,我认为使用的第一个想法:
//html
<body data-ng-controller="MainCtrl">
<div class="container">
<div data-ui-view></div>
</div>
</body>
//js
.controller('MainCtrl', function ($scope,$upload) {
/*File upload config*/
$scope.onFileSelect = function($files) {
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
$scope.upload = $upload.upload({
url: 'server/upload/url',
method: 'POST',
data: {myObj: $scope.myModelObj},
file: file,
}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) {
console.log(data);
});
}
};
/* Datepicker config */
$scope.showWeeks = true;
$scope.minDate = new Date();
$scope.open = …angularjs angular-ui angularjs-directive angularjs-scope angular-ui-bootstrap
推荐指数
解决办法
查看次数
在服务Angularjs中使用服务
我正在尝试向我的工厂注入一个bootstrap-ui $ modal服务,但是当我这样做时,我得到一个循环依赖问题,而当我没有定义$ modal时.代码如下:
retryModule = angular.module('g4plus.retry-call', ['ui.bootstrap'])
retryModule.factory 'RetryCall', ($q, $rootScope)->
requests = {}
failedRequests = {}
uniqueId = 0
modalInstance = undefined
modalClose = true
### Some more code
alertUser = ()->
modalInstance = $modal.open
template: """
<div class="modal-dialog">
... Some more code ...
我如何在工厂内使用$ modal？请不要让我把这个代码放在一个指令中,因为这会破坏目的.如果我能把它放在一个指令中,我就已经完成了这个项目.控制器也是如此.
谢谢!
如果我将$ modal注入我的工厂,循环依赖性错误是:
未捕获错误:[$ injector:cdep]找到循环依赖项:$ modal < - RetryCall < - $ http < - $ compile
javascript twitter-bootstrap angularjs angular-ui angular-ui-bootstrap
推荐指数
解决办法
查看次数
Angular的ngRepeat在$ modal中不起作用
您好我想在$ modal中使用Angular的ngRepeat(在ui-bootstrap-tpls-0.11.0.js中定义).为了实现$ modal我使用的方法完全相同:http ://angular-ui.github.io/bootstrap/
我有一个控制器 - > PageController用于我的页面(弹出窗口将是调用来自)和弹出窗口的控制器 - > ModalInstanceCtrl.在PageController中,我定义了一个对象列表,并通过$ modal.open()函数的resolve属性将此列表传递给ModalInstanceCtrl.在调试中,我可以看到在我的ModalInstanceCtrl $范围内,我有所需的列表.
在$ modal的html代码中,我想在该列表上进行迭代,并使用我想要的信息添加适当数量的表行:).当我在标签上使用ng-repeat时,我看不到任何表格行.如果我删除ng-repeat并使用myList [0] .myProperty将其更改为多行,则会计算此表达式并以可接受的方式显示我的$ modal.可悲的是,我不知道myList的长度,所以我需要使用像ng-repeat这样的东西.
这是有效的:
<div class="modal-body lang_label_popUp">
<table>
<tr>{{translationTablePlaceHolders[0].name}} <input class="input-medium input_popUp" type="text"></input></tr>
<tr>{{translationTablePlaceHolders[1].name}} <input class="input-medium input_popUp" type="text"></input></tr>
<tr>{{translationTablePlaceHolders[2].name}} <input class="input-medium input_popUp" type="text"></input></tr>
<tr>{{translationTablePlaceHolders[3].name}} <input class="input-medium input_popUp" type="text"></input></tr>
</table>
</div>
虽然这不起作用:
<div class="modal-body lang_label_popUp">
<table>
<tr ng-repeat="placeHolder in translationTablePlaceHolders">{{placeHolder.name}} <input class="input-medium input_popUp" type="text"></input></tr>
</table>
</div>
那么从我的弹出式HTLM代码中可以获得ng-repeat吗？
我使用的是Angular v1.2.16和ui-bootstrap-tpls-0.11.0.
提前致谢!
推荐指数
解决办法
查看次数
Angular-UI Bootstrap折叠没有动画
是否可以停用折叠动画？
我对动画的问题是总是有一个活动,其余的都被折叠,所以我不希望每个元素都移动(即使它是几秒钟).或者如果可能的话只是一个"淡出"动画.但不是"从下面流行".
推荐指数
解决办法
查看次数
Angular UI Bootstrap模式 - 使用自定义模态窗口
如链接http://angular-ui.github.io/bootstrap (从顶部的Directive下拉列表中选择模态)中所示,有一个名为windowTemplateUrl的参数,用于覆盖模态内容.因此,如果我们使用它,在templateUrl或模板中给出什么,因为调用modal的open函数需要其中一个.例如,代码如下.
$scope.open = function(){
var modalInstance = $modal.open({
windowTemplateUrl : '/client/content.html'
})
}
如果我运行上面的代码,则会出现需要templateUrl或模板的错误.那么,我如何使用windowTemplateUrl.
推荐指数
解决办法
查看次数
Typeahead在列表名称旁边获取多个值
我发现很难想象为typeahead指令获取一组值的方法.
例如,在这个plunker中,http: //plnkr.co/edit/Sj0kOGipJ4gNv3VCnKzJ？p =preview
的index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/ng-template" id="customTemplate.html">
<a>
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</a>
</script>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<h4>Static arrays</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
<i ng-show="loadingLocations" class="glyphicon …angularjs angular-ui angular-ui-bootstrap angular-ui-typeahead
推荐指数
解决办法
查看次数
Angular UI Bootstrap Typeahead模板显示空但只是第一次
这很奇怪......我第一次输入输入框时,会弹出typeahead模板,但会显示为空.但如果退格并再次执行...那么模板就会填充.就像有某种竞争条件一样typeahead-template-url.Ater认为,问题会消失,直到下一页刷新.有任何想法吗？
angular.module("main.loadbalancer").controller("BindNodeCtrl", function($scope, $modalInstance, VipService, NodeService, Account, StatusTrackerService) {
(function(promise) {
return $scope.getNodeLabel = function(val) {
return promise.then(function(nodes) {
var dropDownItems;
dropDownItems = [];
_.forEach(nodes, function(node) {
if (_.str.include(node.id.toLowerCase(), val.toLowerCase())) {
return dropDownItems.push({
label: node.label,
address: node.address,
port: node.port_number,
value: node.id,
});
}
});
return _.sortBy(dropDownItems, 'label');
});
};
})(NodeService.getNodes());
<input type="text" id="label" name="label" ng-model="$parent.node.id" typeahead-min-length="1"
placeholder="Node Name / Label"
typeahead-editable="false"
typeahead="dropDownItem as dropDownItem.label for dropDownItem in getNodeLabel($viewValue)"
typeahead-template-url="typeahead/bind-node.html" style="width:100%;"
typeahead-loading="loadingNodeLabels" class="form-control" required>
<script type="text/ng-template" id="typeahead/bind-node.html">
<a><i>{{match.model.label}} — …推荐指数
解决办法
查看次数
Cordova AngularJS Windows 8应用程序在ui-bootstrap模板上失败,"指令必须只有一个根元素"
我正在使用Cordova 4.0.0 with AngularJS 1.2.26, Angular-Bootstrap 0.11.2,并UI Router 0.2.11为其创建应用程序Android and Windows (8.0 and 8.1).我只在使用ui-bootstrap模板在Windows中运行应用程序时遇到问题.对于typeahead,datepicker和模态对话框,标准模板会弹出相同的错误,"Template for directive { whatever } must have exactly one root element."
查看Visual Studio中的DOM检查器,似乎每个拥有ui-view指令的节点都会填充自己的头部和主体标记集(包含相关模板).我猜这是问题,但我很难确定插入这些额外节点的位置,因此无法证明理论.
相同的代码可以在最新的Chrome,FireFox和IE桌面浏览器以及Android中运行.
有没有人对这种行为有任何见解？值得注意的是,ngCsp用于缓解Metro应用程序的动态内容插入限制.
提前致谢!
推荐指数
解决办法
查看次数
Angular UI modalinstance将数据传递给视图
我喜欢使用angular ui bootstrap插件将数据从1个视图(主视图)传递到模态视图,下面是我的代码似乎不起作用:
主视图
vm.receipt_id = "1234"
<button type="button" class="btn btn-default" ng-click="vm.alertMeJimmy(vm.receipt_id)">Large modal</button>
调节器
vm.alertMeJimmy = function(receipt_id) {
$uibModal.open({
animation: true ,
templateUrl: '/cashier/views/cashier.angular_components.modal',
controller: 'PatientsController',
controllerAs: 'vm',
resolve: {
receipt_id : function () {
return receipt_id ;
}
},
size: 'lg'
});
}
模态视图
我希望在我的模态视图中像下面一样访问它
<span ng-bind="vm.receipt_id " ></span>
推荐指数
解决办法
查看次数
Bootstrap $ uibModal焦点到元素
我创建了一个AngularJs指令，该指令将焦点设置为html元素。但是它不适用于$ uibModal元素：
angular.module('ui.bootstrap.demo')
.directive('focus', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function postLink(scope, element, attrs) {
scope.$watch(attrs.focus, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
}
};
}]);
http://plnkr.co/edit/BrnFt1kYZN7VsIFRCt3S?p=preview
如何将焦点设置到$ uibModal中的元素？
javascript angularjs angular-ui-bootstrap bootstrap-modal jqlite
推荐指数
解决办法
查看次数
标签 统计
angularjs ×11
javascript ×4
angular-ui ×3
css ×2
cordova ×1
html ×1
jqlite ×1
toggleswitch ×1
windows ×1