Starting out with Angular, my first project involves creating a system that highlights and iterates over rows and then, when clicked, iterates over columns. However, I'm encountering an issue where the numbers are not changing in my $interval function. I suspect it may be due to making too many calls to the JSON data. The values that should change are $scope.rowSelected and $scope.columnSelected. The error message I'm seeing is:
angular.js:13642 TypeError: fn is not a function
at callback (angular.js:12456)
at Scope.$eval (angular.js:17378)
at Scope.$digest (angular.js:17191)
at Scope.$apply (angular.js:17486)
at tick (angular.js:12446)Here is the view:
<!DOCTYPE html>
<html lang="en-us" ng-app="App">
<head>
<title>Click and Type</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="app.js"></script>
<style type="text/css">
.btn-info, .btn-danger, .btn-warning {
height: 2em;
width: 2em;
font-size: 5.5em;
}
</style>
</head>
<body ng-controller="mainController" ng-click="clickToSelect()">
<div ng-controller="clickController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Click and Type</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-controller="intervalController">
<ul class="general_button" ng-repeat="letter in language[0].rows track by $index" ng-init="rowIndex = $index"> {{rowIndex}}
<button type="button" class="btn " ng-class="{true:'btn-warning', false:'btn-info'}[ isRowSelected( rowIndex ) || isColumnRowSelected( rowIndex, columnIndex) ]" ng-repeat="single in letter track by $index" ng-init="columnIndex = $index">
{{columnIndex}}{{single}}
</button>
</ul>
<div >
<button type="button" class="btn btn-danger">hello</button>
<h1 ng-mousemove="textArea = textArea + 1">Mouse over me!</h1>
<label for="inputlg">input-lg</label>
<input class="form-control input-lg" id="inputlg" type="text" value="{{ textArea + highlightedLetter }}">
</div>
</div>
</div>
</div>
</body>
</html>
The module code is as follows:
var App = angular.module('App', []);
var theLanguage = 'english';
App.factory('jsonLanguage', function($http){
var theLanguage = 'english';
return {
get: function(theLanguage){
//var url = theLanguage + '.json';
var url = 'english.json';
return $http.get(url);
}
}
});
App.controller('mainController', function($scope, $http, $log, jsonLanguage, $interval) {
$scope.language;
jsonLanguage.get().then(function(res){
$scope.language = res.data;
$log.log($scope.language);
});
$scope.letterSelectedForText;
$scope.rowOrcolumn = "row";
$scope.rowSelected = 0;
$scope.columnSelected = 0;
//needs to able to pass function how done in angular
$scope.callAtInterval = function() {
console.log("$scope.callAtInterval - Interval occurred");
if ($scope.rowOrcolumn == "row") {
$scope.rowSelected = $scope.rowSelected + 1;
}else if($scope.rowOrcolumn == column){
if ($scope.columnSelected == $scope.language[$scope.rowSelected].length - 1) {
$scope.columnSelected = 0;
$scope.rowSelected = $scope.rowSelected + 1;
$log.log("end of column");
}else {
$scope.columnSelected = $scope.columnSelected + 1;
$log.log("add one column");
}
}
};
//onclick switch rowOrColumn
$scope.clickToSelect = function(){
if ($scope.rowOrcolumn == "row") {
$scope.rowOrcolumn = "column";
}else if($scope.rowOrcolumn == "column"){
$scope.letterSelectedForText = $scope.language[$scope.rowSelected][$scope.columnSelected];
//reset
$scope.rowOrcolumn = "row";
$scope.rowSelected = 0;
$scope.columnSelected = 0;
};
};
$scope.isRowSelected = function( rowIndex ) {
if ($scope.rowOrcolumn == "row" && rowIndex == $scope.rowSelected) {
return true;
} else {
return false;
}
};
$scope.isColumnRowSelected = function(rowIndex, columnIndex) {
if ($scope.rowOrcolumn == "column" && rowIndex == $scope.rowSelected && columnIndex == $scope.columnSelected) {
console.log("rowindex" + rowIndex + $scope.rowSelected + "columnIndex" +columnIndex + $scope.columnSelected);
return true;
}else {
return false;
}
};
$scope.timeOfInterval = 2000;
$interval($scope.callAtInterval(), $scope.timeOfInterval);
});
App.controller('intervalController', function($scope, $log) {
this.$log = $log;
});
App.controller('clickController', function($scope, $log) {
$scope.$log = $log;
var coll = document.getElementsByClassName("btn-danger");
var highlighted = angular.element(document.querySelector(".btn-danger"));
$log.log($scope.highlightedLetter = highlighted.text())
});
If you have any tips or advice on this topic, it would be greatly appreciated. Thank you!