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

【问题标题】：Get index of row and column in ng-repeat在 ng-repeat 中获取行和列的索引
【发布时间】：2016-04-15 05:58:51
【问题描述】：

我已经创建了如图所示的结构，现在每当点击任何框时，我想要它的行和列索引，有可能得到吗？

这是我的代码 sn-p:

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

【问题讨论】：

标签： javascript html angularjs ionic-framework angularjs-ng-model

【解决方案1】：

由于您有静态列数，您可以简单地执行以下操作：

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

【讨论】：

可以改变给定函数中点击框的颜色吗？
不要在控制器中做这样的事情。你应该写一个directive，在那里你可以访问元素，只需在那里添加一个点击处理程序

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：

可以改变给定函数中点击框的颜色吗？
更新了 sn-p 以在单击单元格时更改颜色