标签: angular-ui
Angular-UI ui-keypress无法正常工作
我甚至无法简单地使用angular-ui启动和运行.我希望能够轻松检测按键,例如,在按下enter文本框后自动添加项目而无需按"添加"按钮.
这是我目前的尝试:
<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main</title>
<link rel="stylesheet", href="http://angular-ui.github.com/angular-ui/build/angular-ui.css" />
</head>
<body ng-controller="Ctrl">
<button ng-click="add()">Add</button>
<input type="text" ui-keypress="{enter: 'add()'}" />
{{item}}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://angular-ui.github.com/angular-ui/build/angular-ui.js"></script>
<script src="main.js"></script>
</body>
</html>
var myApp = angular.module('myApp', ['ui.directives']);
function Ctrl($scope) {
$scope.item = "";
$scope.add = function () {
$scope.item = "Item Added";
}
}
你可以在这里看到这个行为:http://jsfiddle.net/NbjZL/5/.请注意,在键入文本后单击按钮可以正常工作,但enter在键入文本后按下则不会.我已经阅读了我可以找到的文档,并查看了几个示例,但我确信我仍然缺少一些小东西.
推荐指数
解决办法
查看次数
如何将选项更改传递给Angular-UI ui-select2？
angular-ui的ui-select2文档显示您可以执行以下操作:
myAppModule.controller('MyController', function($scope) {
$scope.select2Options = {
allowClear:true
};
});
<select ui-select2="select2Options" ng-model="select2">
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
</select>
但是,在该点之后对$ scope.select2Options的更改不执行任何操作.如果ui-select2在这种情况下会观察select2Options的变化,并在它们发生变化时将它们发送给select2,那就太好了.
我需要根据所选内容动态更改maximumSelectionSize,并且执行类似下面的操作显然是错误的,因为您不应该在控制器中弄乱DOM.
<select id="mySelect2" ui-select2="{ allowClear: true}" ng-model="select2" ng-change="selectChange()">
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
</select>
内部控制器:
$scope.selectChange = function() {
if(...) {
$("#mySelect2").select2({ maximumSelectionSize: 1 });
} else {
$("#mySelect2").select2({ maximumSelectionSize: 0 });
}
}
如何在不使用DOM并在控制器中混合关注点的情况下将这些类型的选项传递给select2？(我无法通过指令想出一个干净的方法.)
谢谢!
更新:
基于/sf/answers/1187357461/,Stewie的回答,以及我自己的测试,我将以下代码添加到angular-ui ui-select的链接方法:
try {
scope.uiSelect2 = angular.fromJson(attrs.uiSelect2);
} catch(e) {
scope.$watch(attrs.uiSelect2, function (opts) {
if (!opts) …推荐指数
解决办法
查看次数
Angular-UI select2动态更改选项中的标签属性
Angular-ui select2标签的官方示例是:
myAppModule.controller('MyController', function($scope) {
$scope.list_of_string = ['tag1', 'tag2']
$scope.select2Options = {
'multiple': true,
'simple_tags': true,
'tags': ['tag1', 'tag2', 'tag3', 'tag4'] // Can be empty list.
};
});
我有这段代码:
$scope.select2Options = {
'multiple': true,
'simple_tags': true,
'tags': $scope.categoryNames
};
$scope.$watch(function () { return adminCrudService.getCategoriesForUpdate(); }, function () {
$scope.action = "edit";
$scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate();
if ($scope.categoriesForUpdate.length > null) {
$scope.categoryNames = [];
_.forEach($scope.categoriesForUpdate, function (item) {
$scope.categoryNames.push(item._backingStore.Name);
});
}
});
但这只是不起作用,当我点击Selcet2时,我得到没有找到匹配,我在$ watch中记录$ scope.categoryNames,数据就在那里(所以这部分工作正常).
所以我的问题是可以动态加载标签,如果可以,怎么样？
推荐指数
解决办法
查看次数
UI-Router继承视图
我的代码中开始有一些严重的重复.
有没有办法声明外部视图将继承的父视图？
我的代码如下:
var header = { templateUrl: "partials/header/header.html"};
var footer = { templateUrl: "partials/footer/footer.html"};
$stateProvider
.state('main', {
url: "/",
views: {
"header": header,
"mainContent": { templateUrl: "partials/mainContent.html"},
"footer": footer
}
})
.state('lesson', {
url: "/lesson",
views: {
"header": header,
"mainContent": { templateUrl: "partials/lesson/lesson.html"},
"footer": footer
}
})
.state('register', {
url: "/register",
views: {
"header": header,
"mainContent": { templateUrl: "partials/register/register.html"},
"footer": footer
}
})
.state('404', {
url: "/404",
views: {
"header": header,
"mainContent": { templateUrl: "partials/404/404.html"},
"footer": footer
}
}); …推荐指数
解决办法
查看次数
angular-ui> ui-utils> ui-scroll不起作用(v.0.1.0)
我正在使用这个:http://angular-ui.github.io/ui-utils/,更具体一点:https://github.com/angular-ui/ui-utils/blob/master/modules/滚动/ README.md
但它似乎没有用.这是一个例子:
<div ng-scroll-viewport style="height:240px;" class="chat-messages">
<div class="chat-message" ng-scroll="chat in chats">
<div ng-class="$index % 2 == 0? 'sender pull-right' : 'sender pull-left'">
<div class="icon">
<img src="{{chat.img}}" class="img-circle" alt="">
</div>
<div class="time">
{{chat.time}}
</div>
</div>
<div ng-class="$index % 2 == 0? 'chat-message-body on-left' : 'chat-message-body'">
<span class="arrow"></span>
<div class="sender"><a href="#">{{chat.name}}</a></div>
<div class="text">
{{chat.msg}}
</div>
</div>
</div>
</div>
但我得到的HTML是这样的:
<div class="chat">
<div class="chat-messages" style="height:240px;" ng-scroll-viewport="">
<!--
ngScroll: chat in chats
-->
</div>
如果我用ng-repeat替换ng-scroll,它可以很好地工作.但聊天需要滚动条,所以...我怎么能得到一个呢？:)
推荐指数
解决办法
查看次数
AngularJS UISelect - 在搜索上调用REST API(Min 3 chars)
我使用Angular-UISelect来搜索我的下拉列表.
现在我有一个挑战.
- 需要创建一个控制器级别过滤器(作用于控制器而不是应用程序),从用户获取3分钟的字符并基于3个字符命中REST Api并将结果从API绑定回UISelect.
脚步:
- UIselect的初始加载将没有任何数据.
- 用户输入3个字符
- 触发一个过滤器(控制器作用域),它使用3个字符调用REST API
- 将REST API响应绑定到UISelect.
当我查看UISelect演示时,它会对已绑定的数据执行搜索.
需要一些关于如何去做的输入.
推荐指数
解决办法
查看次数
如何将popover放在突出显示的文本部分上？
假设存在一个文本正文的情况.而且,在突出显示一个单词时,我想要一个弹出窗口显示工具提示位于突出显示的单词.
有点像mac如何显示下面的单词定义 -
这是一个angularjs应用程序,我正在使用angularui.因此,角度ui聚焦的解决方案将是优选的但不是必需的.
提前致谢.
推荐指数
解决办法
查看次数
如何在角度ui-router状态下添加guid正则表达式
我有这条路
.state('mystate', {
url: '/{id}',
templateUrl: '/views/partial.html'
});id param应该是像这样的"2a542f61-5fff-4607-845d-972e6c3ad1e4"形式的guid.我如何在网址"url:'/ {id:？我应该放在这里}}"中添加这个.
推荐指数
解决办法
查看次数
Angular rating readonly在服务器上不起作用
我们有一个评级组件:
uib-rating(ng-init="average = xxxx", ng-model="average", max="5", readonly="true")
由于ng-model在这里使用局部变量,我们有意识地以一种方式绑定该组件.但问题在于readonly属性.
这在我们的本地机器上运行良好.但是当我们在服务器(linux astra)上部署它时,星星仍然活跃.什么可能导致这个问题？(我们在服务器和本地机器上使用相同的角度组件版本)
推荐指数
解决办法
查看次数
在预先选择的angular-ui-bootstrap之后关注其他输入
我有一个angular-ui bootstrap的问题:我有2个输入:
<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="focusSuccessive($item, $model, $label, $event)" class="form-control">
<textarea class="form-control" id="message" rows="10" data-ng-model="caller.data.text" tabindex="25"></textarea>
在我的控制器中,我有一个函数focusSuccessive($ item,$ model,$ label,$ event)"应该在选中后关注textArea.
$scope.focusSuccessive = function($item, $model, $label, $event){
angular.element("#message").focus();
}
但它不起作用,但如果我按下一个按钮:
<button ng-click="focusSuccessive()">focus</button>
它有效,所以如何在选择预先输入后关注textarea或输入？
推荐指数
解决办法
查看次数
标签 统计
angular-ui ×10
angularjs ×10
javascript ×6
css ×1
jquery ×1
scrollbar ×1
ui-scroll ×1
ui-select ×1