Trying to highlight multiple cells from table row but only 1 column getting highlighted?

Question

I have create a table which looks like this

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

I trying to select multiple values from this but it's not working. I want that if I have selected a number and going to select another it should not remove previous one. Tried to store selected numbers in array and created a method to invoke ng-class but ng-class was calling without selecting a number.

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){
		var drawnNumberArray=[];
		var ticketArray=[];
		var obj={};
		$scope.choosen=number;
		$scope.selectedTicket=row;
	}

<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>

I am using ng-class to highlight the selected number.

Response I am getting from server

$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\"]]"
    }];

Here is my code

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>