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

我正在使用ng-class突出显示所选的数字。

我从服务器获取的响应

$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

＆＃13;

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];
  }  
}])

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: