标签: angular-ui

让Angular UI工作

我刚刚安装了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)

我究竟做错了什么?

jquery-ui angularjs angular-ui

11
推荐指数
1
解决办法
1万
查看次数

AngularJS和Bootstrap的分割按钮下拉列表

你知道是否有人将Bootstrap的脚本移植到AngularJS?

我需要我的应用程序的Bootstrap的分割按钮下拉菜单,我真的想避免拉jQuery.我似乎没有谷歌这个.

twitter-bootstrap angularjs angular-ui

11
推荐指数
2
解决办法
2万
查看次数

AngularJS:如何以美国格式验证日期?

我有以下表单代码,允许使用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,则不需要进行其他验证.

javascript validation date angularjs angular-ui

11
推荐指数
2
解决办法
3万
查看次数

AngularJS/UI - 在对话框中聚焦输入

有没有办法使用AngularJS/Angular-UI在输入控件中设置焦点?

我看到Angular-UI有一些Jq-UI =焦点指令,但我无法让它工作.

我有一些使用Angular-UI $对话框服务显示的对话框,并且非常希望每个对话框上的第一个输入在获得焦点后获得焦点

angularjs angular-ui angular-ui-bootstrap

11
推荐指数
3
解决办法
1万
查看次数

带角度的标签:仅使用$ http加载标签内容

我有大量数据的大表单,所以我想要为每个选项卡添加大量数据的选项卡.

我希望在单击选项卡标题时延迟加载选项卡内容,然后在以后再次选择时不需要再次重新加载.

我认为这个例子涉及到我想要的方向: 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是一个很好的方法来解决这个问题?

ajax tabs angularjs angular-ui

11
推荐指数
2
解决办法
2万
查看次数

在DOM中动态重新加载ng-repeat数据

我在视图中有以下代码:

<li ng-repeat="i in items">{{i.id}}</li>

我希望在ng-repeat添加/删除新值时动态触发items.就像在,如果一个新元素被添加到items那个开头那么它应该在开始时动态地呈现给DOM,并且类似地如果元素被添加到该items项目的结尾应该被呈现为最后一个列表项.这种DOM的动态变化是否可能是有角度的?

javascript angularjs angular-ui angularjs-ng-repeat

11
推荐指数
1
解决办法
3万
查看次数

AngularJS - 使用ENTER键接受ui.bootstrap模式

问题:
我无法使用ENTER键接受模态窗口

我修改了默认的Plunker来向你展示我从现在开始做的事情 - > 这里

我拥有:
简而言之,模式识别ENTER键,但它不会触发我的功能(范围问题,我怀疑).

不好的是,我必须修改template/modal/window,如果可能的话,我很乐意保留未受污染的.


想要的只是简单地将ng-enter指令放在我的模态中,而不修改默认模板

额外
我还尝试将"事件13"添加到modal指令中,但我无法传递任何结果modal.close,所以我放弃了这条道路

任何想法?

javascript angularjs angular-ui angular-ui-bootstrap

11
推荐指数
1
解决办法
9006
查看次数

angular ui modal不能引用父范围

我正在使用角度ui模态在我的项目中创建模态.

一切正常,直到我需要在父范围内引用变量.看看plunker代码

似乎modal无法访问父范围.无论如何要克服这个?

angularjs angular-ui angularjs-scope

11
推荐指数
2
解决办法
2万
查看次数

如何在ui-router中实现路径别名

我正试图找到一种方法来实现Angular.js中的路由别名ui-router.

假设我有一个带url的状态,article/:articleId我想/articles/some-article-title/article/76554不改变浏览器位置的情况下重定向(内部).

可以这样做ui-router吗?

angularjs angular-ui angular-ui-router

11
推荐指数
1
解决办法
7863
查看次数

Angst UI模式与Bootstrap 4

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一起使用?

twitter-bootstrap angularjs angular-ui twitter-bootstrap-4

11
推荐指数
1
解决办法
6655
查看次数