Question

我使用jquery-ui selectable with angular来选择表格中的单元格并将这些选定的数据传递给anular控制器。使用角度ng-repeat重复行和列。行重复日期和列重复房间。当选择使用拖动网格时，它会获取指令中的数据（选定的房间和选定的日期）。当我在指令中控制日志时，我可以看到所选房间和选定日期。但是如何在我的控制器中访问这些数据。我的代码如下。

<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');



    };



});

Answer 1

使用将ui-selectable doc-array="rooms"移动到表格标记来解决。

<table cellpadding="10" id="table1" ui-selectable doc-array="rooms">

            <tbody>

                    <tr  ng-repeat="room in rooms"   class="roomContainer" >

                            <td ng-repeat="day in room.days" class="parent"  ng-mouseup="reserve3()" >
                                                       {{day.no}}        
                            </td>

                    </tr>

            </tbody>
        </table>

angular jquery-ui范围内的可选问题

1 个答案: