Question

我已经创建了如图所示的结构，无论何时打到任何一个框，我想要它的行和列索引，有可能得到吗？

structure

这是我的代码段：

<div ng-model="$index" class="row header" ng-repeat="item in dateArray" ng-click="booked($parent.$index)" >
        <div class="col col1 columncenter" style="background-color: #11c1f3;-webkit-box-shadow: 0 0 20px 0px #999;">
                <h3 style="color: white">{{item}}</h3>
        </div>

        <div class="col col1 columncenter"/>
        <div class="col col1 columncenter"/>
        <div class="col col1 columncenter"/>
        <div class="col col1 columncenter"/>

</div>

Answer 1

$index() method of angular which will provide you the row# and for column # do follwing:
<!DOCTYPE html>
<html>
<head>
    <title></title>
<script>
function colno(x) {
    alert("colindex is: " + x.rowIndex);
}
</script>
</head>`enter code here`
<body>
    <div class="col col1 columncenter" onclick="colno(this)"/>
    <div class="col col1 columncenter" onclick="colno(this)"/>
    <div class="col col1 columncenter" onclick="colno(this)"/>
    <div class="col col1 columncenter" onclick="colno(this)"/>
</body>
</html>

Answer 2

由于您有静态列数，您可以这样做：

$scope.clicked = function(row, column){

}

<div ng-model="$index" class="row header" ng-repeat="item in dateArray"
 ng-click="booked($parent.$index)">
    <div class="col col1 columncenter">
            <h3 style="color: white">{{item}}</h3>
    </div>

    <div class="col col1 columncenter" ng-click="clicked($index, 1)"/>
    <div class="col col1 columncenter" ng-click="clicked($index, 2)"/>
    <div class="col col1 columncenter" ng-click="clicked($index, 3)"/>
    <div class="col col1 columncenter" ng-click="clicked($index, 4)"/>
</div>

Answer 3

要以通用方式解决它（没有静态列），这可以工作：

var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
  $scope.dateArray = [15, 16, 17, 18];
  $scope.timeArray = ["8.30", "9.30", "12.30", "14.00"]
  
  //for changing the color of the selected cell
  $scope.selectedCell = [-1, -1];
  $scope.selectCell = function(dateindex, timeindex) {
    $scope.selectedCell = [dateindex, timeindex];
  };
});

.selected {
  background-color: #eeeeee;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
  <table class="table table-bordered">
    <thead>
      <tr>
        <td></td>
        <td ng-repeat="time in timeArray">{{time}}</td>
      </tr>

    </thead>
    <tbody>
      <tr ng-repeat="(dateindex, date) in dateArray">
        <td>{{date}}</td>
        <td ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}">date index: {{dateindex}}, time index: {{timeindex}}</td>
      </tr>
    </tbody>
  </table>
</div>

获取ng-repeat中的行和列索引

3 个答案: