ng-repeatの行と列のインデックスを取得

私はイメージのような構造を作成したので、いつでもどこでも当てはまります。行と列のインデックスが必要です。あなたは列の静的な数を持っているので、あなたは簡単に行うことができますng-repeatの行と列のインデックスを取得

<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

コントローラーでそのようなことをしないでください。 [directive]（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

が一般的な中で、それを解決するために、ここで

structure

は私のコードスニペットですway（静的な列なし）、これは動作します：

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の行と列のインデックスを取得

答えて

関連する問題