动态更改angularjs中静态段落的颜色

I am working on typing tutor. I display some data statically through an array What I want is when user input is being matched on some given paragraph's data then paragraph's matching text's color should be changed.. i hope it will be done through DOM manipulation and tried many time but couldn't find any proper solution.

我正在做打字辅导。我通过一个数组静态地显示一些数据，我想要的是当用户输入匹配某个给定段落的数据时，那么段落的匹配文本的颜色应该改变。我希望可以通过DOM操作完成，尝试了很多次，但是没有找到合适的解决方案。

      <!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: 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"];    // statically input data it's color should be changed after matching with user input
        $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]){
                //user input matching with static data

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


                    }
                    res.shift();
                      }


                          $scope.count++;


                    } 
                    };



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

2 个解决方案

#1

You can use ngClass directive:

你可以使用ngClass指令:

<span ng-repeat="x in typingData" ng-class="{'match': results[$index]}"> &nbsp{{x}}</span>

With the CSS:

CSS:

.match {
  color: green;
}

And the javascript code:

javascript代码:

$scope.error = 0;
$scope.results = []
$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++){
      $scope.results.push(false);
      if($scope.typingData[i] == res[i]){
        //user input matching with static data
        $scope.results[i] = true;
      } else{
        $scope.errorData[i] = res[i];
        $scope.errorData;
        $scope.error++;
      }
      res.shift();
    }
  $scope.count++;
};

Still, your code need some adjustments to take into account when user corrects its typing. But it gives you an idea of how to use ngClass.

不过，当用户纠正输入时，您的代码需要进行一些调整。但是它让你知道如何使用ngClass。

DEMO

演示

2 个解决方案

#1

更多相关文章

随机推荐