Question

在ngRepeat中有很多关于选择倍数行的例子，但我需要的是点击多个表格数据。这就是我在Controller中的内容：


    app.controller('CalendarCtrl', function($scope, Calendar){

    $scope.week = ['Dom','Lun','Mar','Mie','Jue','Vie','Sab']

    $scope.hours = ['6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'];


    $scope.idSelectedDayActive = null;
    $scope.idSelectedHourActive = null;
    $scope.setSelected = function (day, hour) {

        $scope.idSelectedDayActive = day;
        $scope.idSelectedHourActive = hour;

    };

这是我的观点

<table class="table table-bordered">
  <thead>
    <th scope="col" title="Monday"><i class="fa fa-clock-o" aria-hidden="true"></i></th>
    <th ng-repeat="d in week" scope="col">{{d}}</th>
  </thead>
  <tbody>
    <tr ng-repeat="h in hours">
      <td class="col">{{h}}</td>
      <td ng-repeat="d in week"  
          ng-click="setSelected(d, h)"
          ng-class="{'calendar-element-active' : d === idSelectedDayActive && h === idSelectedHourActive, 'calendar-element-disable' : d === idSelectedDayDisable && h === idSelectedHourDisable}">
      </td>
    </tr>
  </tbody>
</table>

这是我的CSS课程：


    .table tbody>tr>td.calendar-element-active, .table tbody>tr>td.calendar-element-active {
        background-color: #00d0d1;
        border: 1px solid #fff;
    }

    .table tbody>tr>td.calendar-element-disable {
        background-color: #fff;
    }

和一个Plunker DEMO

Answer 1

在这里你可以这样做，The Js

'use strict';

var app = angular.module("app", []);
app.controller('CalendarCtrl', function($scope){

    $scope.week = ['Dom','Lun','Mar','Mie','Jue','Vie','Sab']

    $scope.hours = ['6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'];


    $scope.idSelectedDayActive = null;
    $scope.idSelectedHourActive = null;
    $scope.selectedCells = [];
    $scope.setSelected = function (day, hour) {
       for(let selectedCell in $scope.selectedCells){
           if($scope.selectedCells[selectedCell].day == day && 
              $scope.selectedCells[selectedCell].hour == hour){ 
               $scope.selectedCells.splice(selectedCell,1);
               return ;
           }
        }
        $scope.selectedCells.push({'day':day,'hour':hour});
   };    
  $scope.check = function(day,hour){
    for(let selectedCell of $scope.selectedCells){
      if(selectedCell.day == day && selectedCell.hour == hour)
       return true
    }
    return false
  }  


});

并在Html中

<tr ng-repeat="h in hours">
   <td class="col">{{h}}</td>
   <td ng-repeat="d in week"  ng-click="setSelected(d, h)"ng-class="{'calendar-element-active' : check(d,h), 'calendar-element-disable' : d === idSelectedDayDisable && h === idSelectedHourDisable}">
   </td>
 </tr>

基本上它只是你的逻辑，而不是选择一个，你必须使用数组并使其成为选定单元格的数组

编辑： - 为了删除所选项目，setselected函数只是检查当前是否选择了单元格..如果选中它然后取消选择并返回如果循环通过而不返回新单元格被选中

在ngRepeat中突出显示多个选定的表格数据（）

1 个答案: