CODEWITHSUNDEEP
javascriptangularjs
Aaron Rabinowitz
Aaron Rabinowitz

Reputation: 357

number not changing in angularjs

I am new to angular and as a first project I am trying to build a system that highlights and iterates over a row then onclick iterates over a column. for some reason the number don't change in my $interval I think it is a silly mistake( it might be because I am making too many calls to the json) the values that I want that should change are $scope.rowSelected and $scope.columnSelected the error message 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 my 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="//code.angularjs.org/1.5.7/angular.min.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;
            }

            /*.general_button > button:first-child {
                background-color: red;
            }*/

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

here is the module

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 pas 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;
    //var name = $scope.single;

    //$log.log(name);


});

App.controller('clickController', function($scope, $log) {
    $scope.$log = $log;
    var coll = document.getElementsByClassName("btn-danger");
//var highlighted= angular.element(coll);
var highlighted = angular.element(document.querySelector(".btn-danger"));
    //var highlighted = angular.element(element.getElementsByClassName("btn-danger"));
    //alert($scope.highlightedLetter = highlighted.text());
    $log.log($scope.highlightedLetter = highlighted.text())
});

Any help would be appreciated also if someone has a tip or two I would also appreciate it.

Upvotes: 0

Views: 82

Answers (1)

mic4ael
mic4ael

Reputation: 8310

This is the problem $scope.columnSelected + 1;. You are not assigning the result of this expression to $scope.columnSelected. Moreover, you should change $interval($scope.callAtInterval(), $scope.timeOfInterval); to $interval($scope.callAtInterval, $scope.timeOfInterval);

Upvotes: 2

Related Questions