范围内的角度 jquery-ui 可选问题

Posted 2023-05-09

【中文标题】范围内的角度 jquery-ui 可选问题

【英文标题】：angular jquery-ui selectable issue in scope

【发布时间】：2017-05-30 21:40:49

【问题描述】：

我使用 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');



    ;



);

【参考方案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>