我刚刚安装了Angular UI,但我很难让它工作.以下是我遵循的步骤:
index.html(Angular v1.0.1,AngularUI v0.2.1)
<script src="scripts/vendor/angular.js"></script>
<script src="scripts/vendor/jquery-1.7.2.js"></script>
<script src="scripts/vendor/jquery-ui-1.8.18.js"></script>
<script src="scripts/vendor/bootstrap.js"></script>
<script src="scripts/vendor/angular-ui.js"></script>
Run Code Online (Sandbox Code Playgroud)
app.js
var publicApp = angular.module('publicApp', ['ngResource', 'ui'])
Run Code Online (Sandbox Code Playgroud)
我的HTML
<input name="dateField" class="datepicker" value="Click Here for Datepicker" ui-date>
Run Code Online (Sandbox Code Playgroud)
我收到这个错误:
TypeError: Object [[object HTMLInputElement]] has no method 'datepicker'
Run Code Online (Sandbox Code Playgroud)
在chrome中使用JS控制台可以:
$('.datepicker').datepicker()
Run Code Online (Sandbox Code Playgroud)
我究竟做错了什么?
你知道是否有人将Bootstrap的脚本移植到AngularJS?
我需要我的应用程序的Bootstrap的分割按钮下拉菜单,我真的想避免拉jQuery.我似乎没有谷歌这个.
我有以下表单代码,允许使用AngularUI输入日期(日期是必需的,应该与美国日期格式匹配,例如:MM/DD/YY):
<form name="form" ng-submit="createShipment()">
<!-- Shipment Date must be in MM/DD/YY format: -->
<input name="shipmentDate"
ng-pattern='/^[0,1]?\d{1}\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d{3}))$/'
ui-date="{ dateFormat: 'mm/dd/y' }" required ng-model="shipment.ShipmentDate" type="text">
<span ng-show="form.shipmentDate.$error.required">Date Required!</span>
<span ng-show="form.shipmentDate.$error.pattern">Incorrect Format, should be MM/DD/YY!</span>
<input class="btn-primary" ng-hide="!form.$valid" type="submit" value="Create">
</form>
Run Code Online (Sandbox Code Playgroud)
必填字段的验证工作正常,但日期格式未正确验证,并始终显示"格式错误..."消息.
我尝试了几种不同的正则表达式在其他地方工作得很好,但它仍然无效.我也尝试过AngularUI验证,它也不起作用.提前致谢!
更新:
我认为验证与我使用的AngularUI datepicker冲突,但是datepicker无论如何都会自动更新日期,所以如果不使用datepicker,只要正则表达式有效,验证就会起作用,如果使用了datepicker,则不需要进行其他验证.
有没有办法使用AngularJS/Angular-UI在输入控件中设置焦点?
我看到Angular-UI有一些Jq-UI =焦点指令,但我无法让它工作.
我有一些使用Angular-UI $对话框服务显示的对话框,并且非常希望每个对话框上的第一个输入在获得焦点后获得焦点
我有大量数据的大表单,所以我想要为每个选项卡添加大量数据的选项卡.
我希望在单击选项卡标题时延迟加载选项卡内容,然后在以后再次选择时不需要再次重新加载.
我认为这个例子涉及到我想要的方向: angular-ui tabs在tab-content中加载模板
但这似乎加载了一个静态模板:
<tabs>
<pane active="pane.active"
heading="{{pane.title}}"
ng-repeat="pane in panes">
<div ng-include="pane.content"></div>
</pane>
</tabs>
Run Code Online (Sandbox Code Playgroud)
如何使用$ http.get()动态加载窗格的内容?注意:这已经是通过ng-view路由加载的页面了,所以我不能做嵌套路由.
编辑:每个标签的内容都大不相同,所以理想情况下我会为每个标签或类似的东西提供一个功能和模板......
我想angular-ui是一个很好的方法来解决这个问题?
我在视图中有以下代码:
<li ng-repeat="i in items">{{i.id}}</li>
我希望在ng-repeat添加/删除新值时动态触发items.就像在,如果一个新元素被添加到items那个开头那么它应该在开始时动态地呈现给DOM,并且类似地如果元素被添加到该items项目的结尾应该被呈现为最后一个列表项.这种DOM的动态变化是否可能是有角度的?
问题:
我无法使用ENTER键接受模态窗口
我修改了默认的Plunker来向你展示我从现在开始做的事情 - > 这里
我拥有:
简而言之,模式识别ENTER键,但它不会触发我的功能(范围问题,我怀疑).
不好的是,我必须修改template/modal/window,如果可能的话,我很乐意保留未受污染的.
我
想要的只是简单地将ng-enter指令放在我的模态中,而不修改默认模板
额外
我还尝试将"事件13"添加到modal指令中,但我无法传递任何结果modal.close,所以我放弃了这条道路
任何想法?
我正试图找到一种方法来实现Angular.js中的路由别名ui-router.
假设我有一个带url的状态,article/:articleId我想/articles/some-article-title在/article/76554不改变浏览器位置的情况下重定向(内部).
可以这样做ui-router吗?
Bootstrap 3模式工作正常:https: //jsfiddle.net/qLy7gk3f/4/
但Bootstrap 4模式不会:https: //jsfiddle.net/qLy7gk3f/3/
代码完全相同:
$scope.click = function() {
$uibModal.open({
templateUrl: "modal.html",
controller: "modal",
scope: $scope
});
}
Run Code Online (Sandbox Code Playgroud)
如何让AngularUI模态与Bootstrap 4一起使用?