我想在我的应用程序中使用angular-botstrap-ui.但我不知道如何建立分页.
假设我在表中有100条记录,我想在表格行中获取10条结果.通过使用ng-repeat我得到100行,但我想用分页来限制它们.我怎么能做到这一点？
您好我有一个产品列表,我希望人们选择其中一个,然后一个模态显示他们可以输入额外的信息(评论).我正在使用'AngularJS'与'Angular-UI'和'Angular-UI-bootstrap'.我想我能够如何使用http://angular-ui.github.io/bootstrap/#/modal上给出的示例,但是我似乎无法保存评论.它始终保持"请输入评论".这是代码:
模态模板:
<script type="text/ng-template" id="orderModal">
<div class="modal-header">
<h3>Title</h3>
</div>
<div class="modal-body">
<div class="alignleft">{{Product.Naam}}</div>
<div class="alignright">€{{Product.Prijs}}</div>
<div style="clear: both;"></div>
<p>Heeft u een nog opmerking bij dit product?</p>
<input type="text" name="Comment" ng-model="Comment" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Toevoegen</button>
<button class="btn btn-warning" ng-click="cancel()">Annuleren</button>
</div>
</script>
这是控制器:
productModule.controller("ProductsController", function ($scope, bootstrappedData, $modal, $log) {
$scope.products = bootstrappedData.products;
...
$scope.AddNormalOrder = function (product) {
....
};
$scope.OpenModal = function (product)
{
var modalInstance = $modal.open({
templateUrl: 'orderModal',
controller: ModalInstanceCtrl,
resolve: { …javascript angularjs angular-ui angularjs-scope angular-ui-bootstrap
我正在尝试使用angular和Bootstrap进行验证,但由于某些原因,ng-pattern验证在Zip Code中无效.任何帮助都会很棒.
无法粘贴完整代码,但以下是我尝试使用该ng-pattern指令的方法:
<input type="text" class="form-control" id="zipCode" name="zipCode"
ng-model="auth.zip" ng-pattern="^(\d{5}-\d{4}|\d{5})$" required="">
twitter-bootstrap angularjs angularjs-directive angular-ui-bootstrap
我似乎无法获得角度ui bootstraps崩溃指令工作.我已经设置了一个带有最小例子的plunkr,但它仍然没有功能.有人对此有所了解吗？
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@3.1.*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="CollapseController">
<button class="btn btn-default" ng-click="collapsed = !collapsed">Toggle</button>
<div collapse="collapsed">
<div>
<h1>Hello Plunker!</h1>
</div>
</div>
</body>
</html>
JS
angular.module('app', [])
.controller('CollapseController', function($scope){
$scope.collapsed = false;
});
我有一个获得活动幻灯片在角UI引导的问题carousel 之外的carousel.
我有一个面板,里面有旋转木马,并希望将按钮放在面板的页脚中,使用所选幻灯片进行操作,但使用jquery选择器不是一个选项.
我想用纯角度的东西来实现它.
我想我可以使用active属性,但也许有一些聪明的东西可以更顺利地完成.
一些代码(Jade语法):
.panel.panel-info
.panel-body
carousel.imgCarousel(interval='5000')
slide(ng-repeat='media in selCard.superviseTab.media')
img.img-responsive(preload-image ng-src='/api/cards/{{selCard.superviseTab.sID}}/media/{{$index}}')
.carousel-caption
multiSelect
h4 Slide {{$index+1}} of {{selCard.superviseTab.media.length}}
p {{media.originalFilename}}
.panel-footer
.navbar-collapse.collapse
ul.nav.navbar-nav.navbar-left
li
a.btn.btn-danger
i.fa.fa-unlink
我正在使用 angular bootstrap ui modal，它工作正常，但是当我尝试使用 modalInstance 关闭它时，它给出了上述错误。这是我的代码
var app = angular.module('LoginModule', ['ui.bootstrap']);
app.controller('LoginModal', ['$scope', '$modal', function ($scope, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/app/template/Login.html',
controller: 'LoginController',
size: size
});
}
}]);
app.controller('LoginController', ['$scope', '$modalInstance', '$http', function ($scope, $modalInstance, $http) {
$scope.model = {};
$scope.loading = {
state: false
}
$scope.errors = '';
$scope.email = "";
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
我在我用模板指定的控制器中创建了取消函数，但它仍然给出错误。我在 LoginController 内的按钮中使用 ng-click="cancel()" 。需要帮忙？
modal-dialog twitter-bootstrap angularjs angular-ui-bootstrap
我正在使用角度引导日期选择器.我只有一个日期选择器,需要选择一周(星期日到星期六)而不是星期几
对于前者,
从弹出日历中选择周期.
选择2015年7月19日至2015年7月25日的周期
这是2015年7月19日到2015年7月25日的输出
在jQuery中,我知道如何做到这一点,jQuery weekpicker .我很好奇如何使用AngularJS选择周
如有任何帮助,我将不胜感激.
谢谢.
我有一个注入服务,HttpRequestService,当没有服务器时我想用MockHttpRequestService替换,因为我在开发模式下运行(npm start).这个MockHttpRequestService将发回非常简单的响应.
我以为我找到了一种动态替换我的HttpRequestService的方法,但不幸的是我发现HttpRequestService仍在使用中.这是我试过的:
main.ts
import {bootstrap} from '@angular/platform-browser-dynamic';
import {provide} from '@angular/core';
import {ROUTER_PROVIDERS, Router} from '@angular/router-deprecated';
import {HashLocationStrategy, LocationStrategy} from '@angular/common'
import {Http, HTTP_PROVIDERS} from '@angular/http';
import {CORE_DIRECTIVES} from '@angular/common';
import {HttpRequestService} from './app/services/HttpRequestService';
import {MockHttpRequestService} from './app/services/MockHttpRequestService'
import {MyConfigInjectable} from './app/MyConfigInjectable';
import {SomeService} from './app/services/SomeService';
export function main(initialState?: any): Promise<any> {
let providers = [
...HTTP_PROVIDERS,
...CORE_DIRECTIVES,
...ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy })
];
if(process.env.ENV === 'development'){
console.log('Is it set to development?'); //Yes. Yes it is.
providers.push(MyConfigInjectable);
providers.push(SomeService); …我有一个尖锐的uib-typeahead。这是我创建的plunkr的链接。https://plnkr.co/edit/8XwhSXsZlyd0oKSljS9t?p=preview。
我使用了typeahead-is-open属性。
我想要的是，当我单击uib-typeahead时，它应该打开并显示所有值。我假设将typeahead-is-open设置为true即可完成这项工作。它是否正确？当前，在将typeahead-is-open设置为true时，不会打开typeahead。
这是我的html
<input ng-click = "myFunc()" click-outside="typeaheadIsOpen = false;" type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-is-open="typeaheadIsOpen" class="form-control">
我的JS
$scope.myFunc = function() {
$timeout(function() {
$scope.typeaheadIsOpen = true;
$scope.$digest();
})
}
我已经将typeahead-is-open绑定到“ typeaheadIsOpen”变量。单击typeahead时，我将调用myFuc（），它将变量typeaheadIsOpen设置为true。
但是提前输入无法打开。我做错什么了吗？
我需要在禁用按钮上显示工具提示,如果使用AngularJS启用它,则将其删除.