Hi I am getting at console :
angular.js:10072ReferenceError: $document is not defined at link (http://localhost:9999/CheckBoxOperation/:173:15)
at N
<table class="table table-bordered" arrow-selector="">
Actually I am trying to do arrow selection like this http://code.ciphertrick.com/2015/03/15/change-row-selection-using-arrows-in-ng-repeat/
I am getting that error because of code which is inside dashed line in my code. I think it is related to script but I didn't get.
This is my code: AngularJS check box
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script type="text/javascript">
var app = angular.module('formSubmit', []);
app.controller('FormSubmitController',[ '$scope', '$http', function($scope, $http)
{
$scope.headerText = ' Form';
$scope.selectedColor;
$scope.Levels=[]; //for checkbox name
$scope.Rows=[]; //for rows
$scope.selection=[];
$scope.selectedRow=0;
$http({method: 'GET', url: 'controller/getLevelCheckBox'}).
success(function(data, status, headers, config)
{
angular.forEach(data, function(value, key)
{
$scope.Levels.push(value);
});
})
// toggle selection for a given level by name
$scope.toggleSelection = function toggleSelection(levelName) {
var idx = $scope.selection.indexOf(levelName);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(levelName);
$scope.getAllJobs = function()
{
var response = $http.get('controller/getDataTable/'+levelName);
response.success(function(data, status, headers, config)
{
angular.forEach(data, function(value, key)
{
$scope.Rows.push(value); //json Array valuessss
});
$scope.setClickedRow = function(index){
// window.alert("row clicked "+index);
$scope.selectedRow = index;
}
$scope.$watch('selectedRow', function() {
console.log('Do Some processing'); //runs the block whenever selectedRow is changed.
});
window.alert("sccusee");
});
response.error(function(data, status, headers, config)
{
alert("staus ::"+status);
});
}//getAllJobs()
}//else
};//toggle function
}]);//controller
app.directive('arrowSelector',function(){
return{
restrict:'A',
link:function(scope,elem,attrs,ctrl){
var elemFocus = false;
elem.on('mouseenter',function(){
elemFocus = true;
console.log(true);
});
elem.on('mouseleave',function(){
elemFocus = false;
console.log(false);
});
//--------------------------------------------------------------
$document.bind('keydown',function(e){
console.log("bind");
if(elemFocus){
if(e.keyCode == 38){
console.log(" 38 kjeeeey ::"+scope.selectedRow);
if(scope.selectedRow == 0){
return;
}
scope.selectedRow--;
scope.$apply();
e.preventDefault();
}
if(e.keyCode == 40){
if(scope.selectedRow == scope.Rows.length - 1){ return;
}
scope.selectedRow++;
scope.$apply();
e.preventDefault();
}
}
}); //till this point
}
};
});
</script>
</head>
<body data-ng-controller="FormSubmitController">
<h3>{{headerText}}</h3>
<div class=panel>
<div class="check-box-panel">
<div data-ng-repeat="level in Levels">
<div class="action-checkbox">
<input id="{{level}}" type="checkbox" value="{{level}}" data-ng-checked="selection.indexOf(level) > -1"
data-ng-click="toggleSelection(level)" />
<label for="{{level}}"></label>
{{level}}
</div>
</div>
<input type="submit" value="show all jobs " data-ng-click="get All Jobs()"/>
</div>
<div class="selected-items-panel">
<table class="table table-bordered" arrow-selector>
<thead>
<tr data-ng-repeat="(key,value) in Rows" data-ng-if="$last">
<td data-ng-repeat="(key,v) in value"><input type="button" value={{key}}></td>
</tr>
<tbody>
<tr data-ng-class="{'selected':$index == selectedRow}" data-ng-click="setClickedRow($index)"
data-ng-repeat="(key,value) in Rows">
<td data-ng-repeat="(key,v) in value">{{v}}</td>
</tr>
</tbody>
</table>
<div>
selectedRow = {{selectedRow}}
</div>
<div>
item = {{Rows[selectedRow]}}
</div>
</div>
</div>
</body>
</html>
$documentas a dependency in the directive.