Получить индекс строки и столбца в ng-repeat

Я создал структуру, как показано на изображении, всякий раз, когда ударил любой из ящиков, я хочу, чтобы это был индекс строки и столбца, можно получить?Получить индекс строки и столбца в ng-repeat

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>

источник

2016-04-15 Krunal

Поскольку у вас есть статическое число столбцов, вы можете просто сделать:

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

источник

2016-04-15 06:24:23

Благодаря его Уокинг .. – Krunal

Можно изменить цвет щелкнули поле в данной функции? – Krunal

Не делайте такие вещи в контроллере. Вы должны написать [директиву] (https://docs.angularjs.org/guide/directive), где вы получите доступ к элементу, просто добавьте туда обработчик кликов. –

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

источник

2016-04-15 06:12:55

Чтобы решить эту проблему в родовое (без статических столбцов), это работает:

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>

источник

2016-04-15 06:39:28 fikkatra

Возможно изменение цвета щелчка в заданной функции ? – Krunal

обновил фрагмент, чтобы изменить цвет при нажатии на ячейку – fikkatra

Получить индекс строки и столбца в ng-repeat

ответ

Смежные вопросы