无法获得angular-ui的简单可排序演示 - http://jsfiddle.net/B3YDr/:
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-model="items" ui-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<pre>{{items}}</pre>
</div>
angular.module('myApp', ['ui']);
var myCtrl = function($scope) {
$scope.items = ['One','Two','Three'];
};
我在http://angular-ui.github.io/#directives-sortable复制了示例代码,但是仍然无法重新排序列表项.
任何人都可以指出什么是错的？谢谢
我正在尝试向我的工厂注入一个bootstrap-ui $ modal服务,但是当我这样做时,我得到一个循环依赖问题,而当我没有定义$ modal时.代码如下:
retryModule = angular.module('g4plus.retry-call', ['ui.bootstrap'])
retryModule.factory 'RetryCall', ($q, $rootScope)->
requests = {}
failedRequests = {}
uniqueId = 0
modalInstance = undefined
modalClose = true
### Some more code
alertUser = ()->
modalInstance = $modal.open
template: """
<div class="modal-dialog">
... Some more code ...
我如何在工厂内使用$ modal？请不要让我把这个代码放在一个指令中,因为这会破坏目的.如果我能把它放在一个指令中,我就已经完成了这个项目.控制器也是如此.
谢谢!
如果我将$ modal注入我的工厂,循环依赖性错误是:
未捕获错误:[$ injector:cdep]找到循环依赖项:$ modal < - RetryCall < - $ http < - $ compile
javascript twitter-bootstrap angularjs angular-ui angular-ui-bootstrap
我正在尝试实现angular-ui日历.我用以下方式安装了bower,包含脚本所需的所有依赖项:
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/fullcalendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/gcal.js"></script>
HTML如下:
<div id="calendar" ui-calendar="calendarOptions.calendar" ng-model="eventSources" ng-controller="MyController"></div>
JavaScript代码如下:
myAppModule.controller('MyController', function($scope) {
/* config object */
$scope.eventSources = {
events: [
{
title: 'Event1',
start: '2014-07-19'
},
{
title: 'Event2',
start: '2011-07-20'
}
],
color: 'red', // an option!
textColor: 'black' // an option!
};
$scope.calendarOptions = {
calendar:{
height: 300,
editable: true,
header:{
left: 'title',
center: '',
right: 'prev,next basicWeek …我想在点击按钮时打开一个日期选择器.这是我的观点:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="demo">
<input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" is-open="opened" ng-required="true" />
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i>
</button>
</div>
</body>
</html>
和我的控制器
var demo = angular.module('plunker', ['ui.bootstrap']);
demo.controller('demo', function($scope) {
$scope.dt = new Date();
$scope.open = function() {
$scope.opened = true;
};
});
可以在这里找到一个plunker:http://plnkr.co/edit/AzASfL2t5DdIx1ayDOS5?p=preview
我做错了什么？非常感谢你
我正在尝试使用angular-ui日历实现加载回调函数.我希望我的日历在加载后转到特定日期,而不是转到当前日期.
我可以使用dayClick方法获得此功能,但是我根本无法使用angular实现加载功能.下面是代码,请注意加载回调不是控制台记录任何东西.
$scope.goToRootScopeDate = function() {
$scope.myCalendar.fullCalendar('gotoDate', $rootScope.day);
}
/* config calendar view */
$scope.uiConfig = {
calendar: {
defaultView: "agendaDay",
// editable: true,
header: {
left: 'agendaWeek',
center: 'title',
right: 'today prev,next',
},
dayClick: $scope.goToRootScopeDate,
loading: function(bool) {
if (bool) {
console.log('Done loading')
} else {
console.log("still loading")
}
}
},
};
我目前正在使用角度ng-repeat.
当用户点击"下一步15"的按钮时,我想显示下15个项目.我不想从数组中弹出项目,我只想隐藏前15个,并将show限制为接下来的15个.
此外,当用户点击"上一页15"时,我只想显示前15个项目.
这是我到目前为止:
HTML:
<div ng-controller="ctrlIndex as vm">
<ul ng-repeat=" item in vm.items | limitTo: 15 * vm.page
| limitTo: 15 * vm.page < count ? limitTo: 15 * vm.page : 15 - (15 * vm.page - count)"/>
<li>{{ item }}</li>
</ul>
<div><button ng-click="vm.next()">Next 15</button></div>
<div><button ng-click="vm.back()">Prev 15</button></div>
使用Javascript:
var app = angular.module('app', []);
3app.controller('ctrlIndex', function(){
var vm = this;
vm.numRecords = 15;
vm.page = 1;
vm.items = []
for (var i = 0; i < 1000000; ++i) { …javascript angularjs angular-ui angularjs-scope angularjs-ng-repeat
我正在使用ui-calendar v:1.0.1,fullcalendar v:2.4.0,
有我的问题:当我在日历中的几个月之间切换时,所有这些都消失了.我做了一项研究,发现从angular-ui-calendar 279行修改calendar.js
eventsWatcher.onAdded = function(event) {
calendar.fullCalendar('renderEvent', event, (event.stick ? true : false));
};
对于
eventsWatcher.onAdded = function(event) {
calendar.fullCalendar('renderEvent', event, (event.stick ? true : false));
};
诀窍.但我正在寻找更好的解决方案.
我对日历的2º问题是,有时它不能正确渲染线条,当我改变窗口的尺寸时,会出现一些线条而其他线条会消失.
现在是代码.
<div class="col-lg-8">
<h3 class="section-subheading text-muted"></h3>
<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"></div>
</div>
和控制器.
angular.module('lararraizApp')
.controller('EventoCtrl', function ($scope, Evento, uiCalendarConfig, $q) {
$scope.eventos = Evento.query();
$scope.eventSources=[[]];
/* Evento.query({}, function(response) {
angular.forEach(response, function(evento){
$scope.eventSources.push({
id: evento.id,
title: evento.name,
start: evento.fecha,
allDay: true
});
});
});*/
Evento.query().$promise.then(function(res){
angular.forEach(res, function(evento){
$scope.eventSources[0].push({
id: …