想要一个在Angularjs中输入导师的逻辑答案

【问题标题】：want a logic for typing tutor in Angularjs想要一个在Angularjs中输入导师的逻辑
【发布时间】：2016-02-29 14:26:26
【问题描述】：

谁能帮帮我。我对逻辑 Angularjs 应用程序 Typing Tutor 有点困惑。我想要一个关于如何测试来自文本框的用户输入并用红色显示错误的逻辑。像这样……

我希望当用户在文本框中输入文本时，这些文本应该与数组名称 typingData 的数据匹配。

如果两个元素都不匹配，则显示文本的红色背景色............ 好像有一个我想要的例子......

http://crazy2be.github.io/dvorak-typing-tutor/

enter code here

  <!DOCTYPE html>
  <html ng-app="myApp">
  <head>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <style>
  p{
  margin-left: 200px;
  width: 500px;
  height: 200px;
  border : 2px dashed red;
  background-color: lightblue;
  border-collapse: collapse;
  }
  #inputText{
  width: 500px;
    height: 50px auto;
  }
  </style>
  </head>

  <body  ng-controller="myController"> 

  <div> 
  <div> 
    <p> 
    <span ng-repeat="x in typingData"> &nbsp{{x}}
    </span> 
    </p> 
    <div style="margin-left: 200px;">
        <input type="text" ng-model="inputText" ng-keydown="test()" id="inputText" >
    </div> 
   </div> 
   </div> 





   <script>
   var app= angular.module('myApp',[]);
   app.controller('myController',function($scope) {     
  $scope.typingData=['tl','sg','re','wf',' kr','up'                 //'few','above','water','answer','cut','look','out','begin','paper'
   ];
   $scope.getData = [];
    $scope.checkText = function(){
    for(i=0;i<$scope.typingData.length;i++){
        //console.log($scope.typingData[i].split(""));
    }
     }
     $scope.test = function(){
     $scope.getData.push($scope.inputText);
     console.log($scope.getData);


     }
    /*$scope.$watch('inputText',function(newValue,oldValue){
    if(newValue !== oldValue){
    console.log(newValue);
    //console.log($scope.inputText);

    }
    });*/

    });

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

是的，我找到了我的打字导师应用程序的逻辑。没问题....

enter code here

     <!DOCTYPE html>
     <html ng-app="myApp">
     <head>

      <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">        </script>
     <style>
      p{
       margin-left: 200px;
       width: 650px;
       height: 300px;
       border : 2px dashed white;
       background-color: black;
       color:white;
       font-size:30px;
       border-collapse: collapse;
        }
       #inputText{
        width: 650px;
        height: 100px;
        font-size: 25px;
        }
        .result{
        border: 2px dashed white;
        margin-left: 910px;
        margin-top: -339px;
        width: 278px;
        font-size: 25px;
        height: auto;
        float: right;
        background-color:black;
        color:white;
        margin-right: 51px;
        }
         .time{
            border: 2px dashed white;
          background-color: black;
          float: left;
          width: 100px;
          height: 100px;
          border-radius: 25px;
          margin-top: -343px;
          margin-left: 29px;
          text-align:center;
          font-size:30px;
          color:white;
          }
          </style>
          </head>

          <body  ng-controller="myController"> 

           <div> 
            <div> 
            <p> 
            <span ng-repeat="x in typingData"> &nbsp{{x}}
            </span> 
            </p> 

            <div style="margin-left: 200px;">

            <input type="text" ng-init="count = 0" ng-keypress="check($event)" id="inputText" ng-model="getText">
            <span  ng-if="event.keyCode == 32">{{check()}}</span>

            </div> 
            </div> 
            <div class="result">
                <ul> Your speed is :{{speed}} <br/>number of Errors: {{error}}
            <li ng-repeat="x in errorData">{{x}}</li></ul>
            </div>
             <div class="time">{{time}}</div>
             </div> 





           <script>
           var app= angular.module('myApp',[]);
                                 app.controller('myController',function($scope,$interval,$location) {     
          $scope.typingData=["page","white","talk","book","follow","men","only","can","that","it","people","carry","much","kind","hear","start","begin","daily","work","and","the","lead","performance","no","place","for","him","even","most","incompetent","firm","you","could","choose","dozen","donkeys","on","they","hangling","over","a","hundred","of","pound","finance","revolution","deficit","in","your","sky","rocket"];
            $scope.time=0;
            $scope.tempData = [];
            $scope.errorData = [];
              $scope.timer = function(){
            $scope.time++;


                 $scope.speed=Math.floor($scope.word/$scope.time*60);

                if($scope.time == 30){    


                 if(confirm('Time Over')){
                  window.location.reload();
                 $scope.time = 0;  

                $scope.speed = '';
                  $scope.getText = '';

              }
                 else{
                    window.location.reload();
                   }
                 }
                   };

                  $interval(function(){$scope.timer();},1000);



               $scope.error = 0;
               $scope.check = function($event){
              var keyCode = $event.keyCode;
                    if(keyCode == 32){




                 var res =$scope.getText.split(" ");
                 $scope.word = res.length;

                 for(var i = $scope.count;i < res.length;i++){
                    if($scope.typingData[i] == res[i]){


                  }else{
                    $scope.errorData[i] = res[i];
                    $scope.errorData;
                    $scope.error++;


                        }
                        res.shift();
                          }


                              $scope.count++;


                        } 
                        };



                          });
                         </script>
                          </body>
                              </html>

我正在努力使它更具交互性.....

【讨论】：