0
我使用jquery-ui可選角度來選擇表格網格中的單元格，並將這些選定的數據傳遞給anular控制器。使用角度ng重複來重複行和列。行重複日期和列重複房間。當通過拖動網格進行選擇時，它將採用指令中的數據（選定房間和選定日期）。當我在控制檯內登錄指令時，我可以看到選定的房間和選定的日子。但是我怎樣才能訪問我的controller中的數據。我的代碼如下。角度jquery-ui在範圍內可選擇的問題
<table cellpadding="10" id="table1">
<tbody>
<div >
<tr ng-repeat="room in rooms" ui-selectable doc-array="rooms" class="roomContainer" >
<td ng-repeat="day in room.days" class="parent" ng-mouseup="reserve3()" >
{{day.no}}
</td>
</tr>
</div>
</tbody>
</table>
指令
angular.module('myApp')
.directive('uiSelectable', function(){
return {
scope:false,
link: function(scope, element, attrs){
scope.$on('clearselection', function (event, document) {
element.find('.ui-selected').removeClass('ui-selected')
});
element.selectable({
stop: function (evt, ui) {
console.log(evt);
scope.selectedDays =[];
var collection = scope.$eval(attrs.docArray)
var selected = element.find('td.parent.ui-selected').map(function() {
var idx1 = $(this).index();
console.log(idx1);
element.find('td.parent.ui-selected').parent().map(function() {
var idx2 = $(this).index();
console.log(idx2);
//console.log(scope.DataList)
scope.selectedDays.push(scope.rooms[idx2].days[idx1]);
scope.selectedRoom = scope.rooms[idx2];
scope.kkk = 'testing 123 ..............';
scope.$apply();
console.log(scope.selectedRoom);
console.log(scope.selectedDays);
}).get();
}).get();
}
});
}
}
});
控制器
var app = angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
app.controller('myCtrl', function($scope, $timeout) {
$scope.firstName = "John";
$scope.lastName = "Doe";
var days1 = [{no: 1, clicked: false,count:0}, {no:2, clicked: false,count:0}, {no:3, clicked: false,count:0}, {no:4,clicked: false}, {no:5}, {no:6}, {no:7}, {no:8},{no: 9}, {no:10}, {no:11}, {no:12}, {no:13}, {no:14}, {no:15}, {no:16} ,{no: 17}, {no:18}, {no:19}, {no:20}, {no:21}, {no:22}, {no:23}, {no:24},{no: 25}, {no:26}, {no:27}, {no:28}, {no:29}, {no:30}, {no:31}];
var days2 = [{no: 1, clicked: false, count: 0}, {no:2, clicked: false,count: 0}, {no:3,clicked: false,count:0}, {no:4, clicked: false}, {no:5}, {no:6}, {no:7}, {no:8},{no: 9}, {no:10}, {no:11}, {no:12}, {no:13}, {no:14}, {no:15}, {no:16} ,{no: 17}, {no:18}, {no:19}, {no:20}, {no:21}, {no:22}, {no:23}, {no:24},{no: 25}, {no:26}, {no:27}, {no:28}, {no:29}, {no:30}, {no:31}];
var days3 = [{no: 1, clicked: false,count:0}, {no:2, clicked: false,count:0}, {no:3, clicked: false, count:0}, {no:4, clicked: false, count:0}, {no:5}, {no:6}, {no:7}, {no:8},{no: 9}, {no:10}, {no:11}, {no:12}, {no:13}, {no:14}, {no:15}, {no:16} ,{no: 17}, {no:18}, {no:19}, {no:20}, {no:21}, {no:22}, {no:23}, {no:24},{no: 25}, {no:26}, {no:27}, {no:28}, {no:29}, {no:30}, {no:31}];
var days4 = [{no: 1, clicked: false, count:0}, {no:2, clicked: false,count:0}, {no:3, clicked: false, count:0}, {no:4, clicked: false, count:0}, {no:5}, {no:6}, {no:7}, {no:8},{no: 9}, {no:10}, {no:11}, {no:12}, {no:13}, {no:14}, {no:15}, {no:16} ,{no: 17}, {no:18}, {no:19}, {no:20}, {no:21}, {no:22}, {no:23}, {no:24},{no: 25}, {no:26}, {no:27}, {no:28}, {no:29}, {no:30}, {no:31}];
$scope.rooms = [
{ name: '101', age: 23 , days:days1 },
{ name: '102', age: 23 , days:days2 },
{ name: '103', age: 23 , days:days3},
{ name: '104', age: 23 , days:days4}
];
$scope.years = ['2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'];
$scope.months = ['1','2','3','4','5','6','7','8','9','10','11','12'];
$scope.selectedDays = [];
$scope.selectedRoom = {};
$scope.kkk = '';
$scope.selectedYear ='2016';
$scope.selectedMonth = '1';
var clicked = true;
var count =0 ;
$scope.getMonthDays = function(){
var y= $scope.selectedYear;
var m= $scope.selectedMonth;
var days = new Date(y, m, 0).getDate();
var days1 = [];
for(var i=0; i< days; i++){
var day= {
no: i+1
};
days1.push(day);
}
console.log(days1);
for(var j=0; j<$scope.rooms.length; j++){
$scope.rooms[j].days = days1;
}
};
$scope.reserve3 = function(){
console.log($scope.selectedRoom);
$timeout(function() {
$scope.open('lg');
console.log($scope.selectedRoom);
console.log($scope.kkk);
}, 1000);
console.log('opening');
};
});