试图突出表格行中的多个单元格，但只有1列突出显示？

Question

我创建一个表，看起来像这样

5 11 24 "" "" "" "" 71 88 
"" "" 25 "" 42 53 61 "" 90 
7 14 "" 32 50 "" 65 "" "" 

我想选择这个倍数值，但它不工作。 我希望如果我选择了一个号码并选择另一个号码，它不应该删除以前的号码。 试图将选定的数字存储在数组中，并创建了调用ng-class的方法，但ng-class在未选择数字的情况下调用。

var ticktStr = $scope.ticketsData; 
 
console.log(ticktStr); 
 
var ticketList = []; 
 
var ticktRow = []; 
 

 
var gameData = ticktStr[0]; 
 

 
angular.forEach(ticktStr, function(value, index) { 
 

 
    var ticketObj = new Object(); 
 
    ticketObj.id = JSON.parse(value.ticket.id); 
 
    ticketObj.ticket = JSON.parse(value.ticket.ticket); 
 
    ticketObj.number = []; 
 
    ticketList.push(ticketObj); 
 
}); 
 
console.log(ticketList); 
 
$scope.tickets = ticketList; 
 

 
$scope.selectNumber=function(row,number){ 
 
\t \t var drawnNumberArray=[]; 
 
\t \t var ticketArray=[]; 
 
\t \t var obj={}; 
 
\t \t $scope.choosen=number; 
 
\t \t $scope.selectedTicket=row; 
 
\t }

<table class="table table-bordered tickets-tbl" ng-repeat="ticketrow in tickets"> 
 

 
    <tbody> 
 
    <tr> 
 
     <td class="tickets-tbl-td"> 
 
     <table> 
 
      <tr class="tckts" ng-repeat="row in ticketrow.ticket track by $index"> 
 
      <td ng-class="{selected: choosen == drawnNumber && row[0]==choosen && ticketrow.id == selectedTicket}" ng-click="selectNumber(ticketrow.id,row[0])">{{row[0]}}</td> 
 
      <td ng-class="{selected: choosen == drawnNumber && row[1]==choosen && ticketrow.id == selectedTicket}" ng-click="selectNumber(ticketrow.id,row[1])" ">{{row[1]}}</td> 
 
      <td ng-class="{selected: choosen==drawnNumber && row[2]==choosen && ticketrow.id==selectedTicket} " ng-click="selectNumber(ticketrow.id,row[2]) "">{{row[2]}}</td> 
 
      <td ng-class="{selected: choosen == drawnNumber && row[3]==choosen && ticketrow.id == selectedTicket}" ng-click="selectNumber(ticketrow.id,row[3])" ">{{row[3]}}</td> 
 
      <td ng-class="{selected: choosen== drawnNumber && row[4]==choosen && ticketrow.id==selectedTicket} " ng-click="selectNumber(ticketrow.id,row[4]) "">{{row[4]}}</td> 
 
      <td ng-class="{selected: choosen == drawnNumber && row[5]==choosen && ticketrow.id == selectedTicket}" ng-click="selectNumber(ticketrow.id,row[5])" ">{{row[5]}}</td> 
 
      <td ng-class="{selected: choosen==drawnNumber && row[6]==choosen && ticketrow.id==selectedTicket} " ng-click="selectNumber(ticketrow.id,row[6]) "">{{row[6]}}</td> 
 
      <td ng-class="{selected: choosen == drawnNumber && row[7]==choosen && ticketrow.id == selectedTicket}" ng-click="selectNumber(ticketrow.id,row[7])" ">{{row[7]}}</td> 
 
      <td ng-class="{selected: choosen==drawnNumber && row[8]==choosen && ticketrow.id==selectedTicket} " ng-click="selectNumber(ticketrow.id,row[8]) "">{{row[8]}}</td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 

 

 

 
    </tr> 
 
    </tbody> 
 
</table>

我使用纳克级以突出所选号码。

回应，我从服务器

$scope.ticketsData= [{ 
     "id": 1, 
     "ticket": "[[\"5\",\"11\",\"24\",null,null,null,null,\"71\",\"88\"],[null,null,\"25\",null,\"42\",\"53\",\"61\",null,\"90\"],[\"7\",\"14\",null,\"32\",\"50\",null,\"65\",null,null]]" 
    }, 
    { 
     "id": 2, 
     "ticket": "[[\"1\",null,null,null,\"44\",null,\"61\",\"71\",\"82\"],[\"4\",\"19\",\"22\",null,null,null,\"68\",\"76\",null],[null,null,\"30\",\"34\",\"50\",\"58\",null,null,\"83\"]]" 
    }]; 

这里得到的是我的代码

Answer 1

angular.module('app', []).controller('ctrl', ['$scope', function($scope){ 
 
    var ticketsData= [{ 
 
     "id": 1, 
 
     "ticket": "[[\"5\",\"11\",\"24\",null,null,null,null,\"71\",\"88\"],[null,null,\"25\",null,\"42\",\"53\",\"61\",null,\"90\"],[\"7\",\"14\",null,\"32\",\"50\",null,\"65\",null,null]]" 
 
    }, { 
 
     "id": 2, 
 
     "ticket": "[[\"1\",null,null,null,\"44\",null,\"61\",\"71\",\"82\"],[\"4\",\"19\",\"22\",null,null,null,\"68\",\"76\",null],[null,null,\"30\",\"34\",\"50\",\"58\",null,null,\"83\"]]" 
 
    }]; 
 
    
 
    $scope.tables = ticketsData.map(function(x){ return { id: x.id, rows: JSON.parse(x.ticket)};}); 
 
    
 
    $scope.selected = []; 
 
    $scope.select = function(tableId, parentIndex, index){ 
 
    var selected = $scope.iSelected(tableId, parentIndex, index); 
 
    if(!selected) 
 
     $scope.selected.push({tableId, parentIndex, index}); 
 
    else 
 
     $scope.selected.splice(selected, 1); 
 
    } 
 
    $scope.iSelected = function(tableId, parentIndex, index){ 
 
    return $scope.selected.filter(function(x){ return x.tableId==tableId && x.parentIndex==parentIndex && x.index==index;})[0]; 
 
    } 
 
}])

table { 
 
    border-collapse: collapse; 
 
} 
 
table, td { 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 
.selected{ 
 
    background-color:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app='app' ng-controller='ctrl'> 
 
    <table ng-repeat='table in tables' style='margin-bottom:30px'> 
 
    <tbody> 
 
     <tr ng-repeat='row in table.rows' ng-init='$parentIndex = $index'> 
 
     <td ng-class='{selected:iSelected(table.id, $parentIndex, $index)}' ng-repeat='cell in row track by $index' ng-click='select(table.id, $parentIndex, $index)'>{{cell == null ? "\"\"" : cell}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    {{selected | json}} 
 
</div>

基于