我已按照此处描述的步骤使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) 有没有办法在不使用指令的情况下验证角度的字段?例如:我想在输入字段上进行以下验证.
我想在调用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
有人可以建议吗?一个工作的例子会很棒.
我想用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) 我在项目中使用基于状态的路由(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)
已经检查过文件但没有这样的方法.
有任何想法吗?
我需要在输入中捕获用户的退格.
所以我做到了这一点:
<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)
但是不打印任何东西.这有什么问题?角度是否能够捕获退格?
我正在使用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"它是不错的,但在移动设备上我只能通过再次单击该项来关闭工具提示,而不是能够单击页面上的其他位置来关闭它.
我在这个代码中使用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"作为活动.
怎么做到这一点?
我正在使用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字符串转换回对象,但除非必须,否则我宁愿不这样做.谢谢你的帮助!
我想做一些我不知道是否可能的事情
<!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)
// 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) 我正在创建一个具有动态状态的应用程序,有时我需要从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)angular-ui ×10
angularjs ×10
javascript ×3
classname ×1
datepicker ×1
events ×1
keypress ×1
ng-grid ×1
state ×1
tabs ×1
ui-validate ×1
validation ×1