2016-08-09 170 views
0

Ich bin neu zu eckig und als ein erstes Projekt, ich versuche ein System zu erstellen, das über eine Zeile markiert und iteriert dann onclick iteriert über eine Spalte. aus irgendeinem Grund die Zahl nicht in meinem $ Intervall ändern Ich denke, es ist ein dummer Fehler (es könnte sein, weil ich zu viele Anrufe an den JSON) die Werte, die ich ändern möchte sind $scope.rowSelected und $scope.columnSelected die Fehlermeldung 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)Anzahl ändert sich nicht in angularjs

hier ist meine Ansicht

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

hier ist das Modul

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()) 
}); 

Jede Hilfe wäre auch zu schätzen, wenn jemand ein oder zwei Trinkgeld hat, ich würde es auch schätzen.

+0

Eine Geige wäre schön ändern –

Antwort

2

Dies ist das Problem $scope.columnSelected + 1;. Sie ordnen das Ergebnis dieses Ausdrucks nicht $scope.columnSelected zu. Darüber hinaus sollten Sie $interval($scope.callAtInterval(), $scope.timeOfInterval);-$interval($scope.callAtInterval, $scope.timeOfInterval);

+0

wie würde ich über das tun gehen so –

+1

'$ scope.columnSelected = $ scope.columnSelected + 1 'oder' $ scope.columnSelected + = 1; ' – mic4ael

+0

das ist ein Teil des Problems immer noch den gleichen Fehler obwohl –