标签: angular-ui

Angular UI Datepicker无法正常工作

我已按照此处描述的步骤使Angular UI工作,此处如何将AngularUI集成到AngularJS?,但无法获取弹出的日期选择器.

请注意,在接受的答案中,两个帖子中的小提琴都不起作用.

有什么建议?这个小工具是在最新版本的angular-ui上工作的吗?

更新:我的资源导入

<link href="/assets/jquery-ui-1.10.2.custom.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/angular-ui.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/project.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom.min.js?body=1" type="text/javascript"></script>
<script src="/assets/angular.min.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-ui.min.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-resource.min.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/directives.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.hotkeys.js?body=1" type="text/javascript"></script>
<script src="/assets/module.js?body=1" type="text/javascript"></script>
<script src="/assets/underscore-min.js?body=1" …
Run Code Online (Sandbox Code Playgroud)

datepicker angularjs angular-ui

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

使用没有指令的JavaScript函数进行Angularjs表单/字段验证

有没有办法在不使用指令的情况下验证角度的字段?例如:我想在输入字段上进行以下验证.

  • 如果字段为空,我们应该显示"字段必须包含值"消息.
  • 如果字段包含字母数字字符,我们应该显示"字段只能包含数字".
  • EVEN号码 - 给用户的消息"值必须是偶数".

我想在调用JavaScript函数时进行以下验证.

我google了一下,发现有一种方法可以使用ng-valid和$ error,但是我没有设法让它工作.

下面的代码是根据我得到的答案之一:

<div ng-app>
<form name='theForm' novalidate>
    <input type='text' name='theText' ng-model='theText' ng-pattern='/^[0-9]+$/'/>
    <span ng-show='theForm.theText.$error.pattern'>Field can contain only digits</span>
    <span ng-show='theText.length<1'>Field must contain a value</span>
    <span ng-show='theText%2!=0&&document.getElementsByName("theText").value!=""&&!theForm.theText.$error.pattern&&!theForm.theText.$pristine'>Value must be an even number</span>
    <br/><input type='submit' value='Submit' />
</form>
Run Code Online (Sandbox Code Playgroud)

我想把最后一个[span]里面的东西放进一个JavaScript函数中,以使它更通用,最终只改变JS,而不是在条件变化时改变HTML

有人可以建议吗?一个工作的例子会很棒.

javascript validation angularjs angular-ui ui-validate

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

Angular-UI选项卡:将类添加到特定选项卡

我想用Angular UI创建以下选项卡:

标签http://gyazo.com/1a0153506b386d4746c108c420f7ae1b.png

所以,我正在添加基于Bootstap类名/标记的样式:

.nav-tabs > li.new > a {
  padding-top: 5px;
}
.nav-tabs > .new > a:after {
  content: "NEW";
  color: indianred;
  font-size: 10px;
  vertical-align: super;
  padding-left: 2px;
}
Run Code Online (Sandbox Code Playgroud)

(正如你所看到的,我<a>在添加超文本文本后需要补偿填充,否则会被推下来.)

接下来,我在html/js文件中有以下标记和代码:

HTML:
<tabset>
    <tab ng-repeat="tab in tabs" heading="{{ tab.title }}" active="tab.active" ><!-- ng-class="{new: tab.new}"-->
        <div ng-include="tab.page"></div>
    </tab>
</tabset>

JS:
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Tab 1", content:"Dynamic content 1" },
    { title:"Tab 2", content:"Dynamic content 2", active: true, 'new': true …
Run Code Online (Sandbox Code Playgroud)

tabs classname twitter-bootstrap angularjs angular-ui

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

使用Angular UI Router从URL字符串获取状态

我在项目中使用基于状态的路由(Angular UI Router v0.2.7)并寻找从给定URL字符串获取当前状态(名称)的方法.

就像是:

$state.get([urlString]) returns stateName:String or state:Object
Run Code Online (Sandbox Code Playgroud)

我需要此方法来检查给定URL是否存在状态,因为并非所有URL都映射到项目中的状态.使用Play Framework作为后端,某些URL(例如,登录表单)未映射到状态,因为它们使用不同的模板,然后是我的应用程序的Angular(主要)部分.对于那些"无角度"页面(即,未被状态覆盖),我会进行重新加载.要识别状态未涵盖的URL,我需要上述方法.计划像这样做:

$rootScope.$watch(function() { return $location.path(); }, function(newUrl, oldUrl) {
    if(newUrl !== oldUrl) {
        if (!$state.get(newUrl)) {
            $window.location.assign(newValue);
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

已经检查过文件但没有这样的方法.

有任何想法吗?

javascript state angularjs angular-ui

10
推荐指数
1
解决办法
4282
查看次数

AngularJS退格键

我需要在输入中捕获用户的退格.

所以我做到了这一点:

<input type="text" ui-keypress="{8:'removeTagOnBackspace()'}" ng-model="searchStudent" />
Run Code Online (Sandbox Code Playgroud)

然后,在我的控制器里面我做了这个,只是为了检查它是否正常工作:

$scope.removeTagOnBackspace = function() {
    console.log('here');
};
Run Code Online (Sandbox Code Playgroud)

但是不打印任何东西.这有什么问题?角度是否能够捕获退格?

keypress angularjs angular-ui

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

我不能在Angular Bootstrap工具提示上使用"hover"和"outsideClick"触发器

我正在使用Angular Bootstrap,并希望让我的工具提示在桌面上使用"悬停"触发,并在移动设备上"点击",如果您在工具提示外单击,则无法悬停但也会关闭工具提示.我把它设置为tooltip-trigger ="hover outsideClick",因为"outsideClick"现在是一个受支持的触发器(https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs),但是这会打破工具提示完全如此,即使悬停也不起作用.

<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span>
Run Code Online (Sandbox Code Playgroud)

有没有办法让这些工作在一起?

如果我只是使用tooltip-trigger ="hover click"它是不错的,但在移动设备上我只能通过再次单击该项来关闭工具提示,而不是能够单击页面上的其他位置来关闭它.

twitter-bootstrap angularjs angular-ui twitter-bootstrap-3

10
推荐指数
1
解决办法
1702
查看次数

Angular UI - 以编程方式设置活动选项卡

我在这个代码中使用AngularUI:

<uib-tabset type="pills">
    <uib-tab heading="Tab 1">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2">Tab 2 content</uib-tab>
</uib-tabset>
Run Code Online (Sandbox Code Playgroud)

我想以编程方式更改角度控制器代码中的当前活动标记.例如,选择选项卡"2"作为活动.

怎么做到这一点?

angularjs angular-ui angular-ui-bootstrap angular-ui-tabset

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

Angular UI Select2,为什么ng-model被设置为JSON字符串?

我正在使用angular-ui的select2进行相当简单的下拉菜单.它由我控制器范围内的静态数据阵列支持.在我的控制器中,我有一个函数,可以在下拉列表的ng-change上调用,以便在值发生变化时执行一些操作.

但是,我发现,ng-model的属性被设置为JSON字符串而不是实际的javascript对象,这使得无法使用点表示法从该模型中获取属性.

这是处理更改下拉列表值的函数:

$scope.roleTypeChanged = function() {
  //fine:
  console.log('selectedType is: ', $scope.adminModel.selectedType);

  // this ends up being undefined because $scope.adminModel.selectedType is a 
  // JSON string, rather than a js object:
  console.log('selectedType.typeCode is: ', $scope.adminModel.selectedType.typeCode);
}
Run Code Online (Sandbox Code Playgroud)

以下是我的完整示例的一个内容:http://plnkr.co/edit/G39iZC4f7QH05VctY8zG

我以前从未见过一个与ng-model绑定的属性,但是我对Angular也很新,所以我可能在这里做错了.我当然可以像$ .parseJSON()那样将JSON字符串转换回对象,但除非必须,否则我宁愿不这样做.谢谢你的帮助!

angularjs jquery-select2 angular-ui

9
推荐指数
1
解决办法
9300
查看次数

将ng-click事件插入ng-grid

我想做一些我不知道是否可能的事情

HTML

<!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
 </html>
Run Code Online (Sandbox Code Playgroud)

JS

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.gridOptions = { data: 'myData',
                         cellTemplate:'<div class="ngCellText" …
Run Code Online (Sandbox Code Playgroud)

events angularjs angular-ui ng-grid angularjs-ng-click

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

ANGULAR-UI-ROUTER:从URL解析状态

我正在创建一个具有动态状态的应用程序,有时我需要从URL解析状态名称.

例如:我有/dashboard/user/12268,我需要得到这个州'dashboard.user'.

有没有办法用这些工具来做到这一点ui-router?我现在无法知道如何做到这一点......

我正在使用requireJS进行动态模块加载的应用程序.第一次没有问题,因为用户被发送到登录状态.登录后,我使用require只加载用户有权访问的状态.但是当用户重新加载页面时,我再次加载模块,并需要将URL解析为状态,并且存在问题.我已经开始尝试使用urlMatcherFactory但无法解决它们.

在URL解析后加载状态.

流程是(刷新页面后http://localhost:8090/index.html#/dashboard/user/12268):

  • 引导应用程序(没有状态)
  • 此时,ui-router已经装好了
  • 获取用户有权访问的状态,并注册它们(这些状态配置阶段注册)
  • 找出我是否有一个匹配给定网址的状态重定向到那里.这就是我被困住的地方.

为了在应用程序引导之后加载状态,我使用了Ben Nadel解决方案的变体,其中包括状态和常量.

data-main在RequireJS中有这个初始化代码:

require.config({
    // REQUIREJS CONFIGURATION
});

require(['app'], function (app) {
    app.bootstrap(document);

    var ng = angular.injector(['ng']);
    var $window = ng.get('$window')
    var $q = ng.get('$q');

    var appStorage = $window.localStorage;
    var loadedManifests;

    try {
        loadedManifests = JSON.parse(appStorage.getItem('loadedManifests'));
    } catch(e) {
        loadedManifests = [];
    }

    if (!angular.isArray(loadedManifests) || loadedManifests.length === 0) {
        $q.all([
                app.loadManifest('login/manifest'), …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angular-ui angular-ui-router

9
推荐指数
2
解决办法
5864
查看次数