Question

我正在打字导师。我通过数组静态显示一些数据我想要的是当用户输入与某个给定段落的数据匹配时，应该更改段落的匹配文本的颜色。我希望它可以通过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>

Answer 1

您可以使用ngClass指令：

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

使用CSS：

.match {
  color: green;
}

和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++;
};

但是，您的代码需要进行一些调整，以便在用户更正其输入时予以考虑。但它让您了解如何使用ngClass。

DEMO

Answer 2

您可以使用ngBindHtml - Plunker

标记

<p ng-bind-html="newParagraph"></p>
<input type="text" style="width:400px" ng-model="input">

JS

app.controller('MainCtrl', function($scope) {
  $scope.paragraph = 'Mauris tincidunt aliquet sapien. Nulla metus libero, imperdiet vel ullamcorper eu, bibendum in urna. Phasellus eget suscipit felis. Aenean rutrum risus ac interdum ultricies. Maecenas egestas venenatis fringilla. In hac habitasse platea dictumst. Vestibulum auctor lorem nulla, eu maximus nibh viverra id. Morbi in bibendum nisl. Sed neque magna, ullamcorper eget molestie nec, placerat eget diam.';
  $scope.newParagraph = $scope.paragraph;

  $scope.$watch("input", function(newValue) {
    if (angular.isDefined(newValue)) {
      if ($scope.paragraph.search(newValue) !== -1) {
        $scope.newParagraph = $scope.paragraph.replace(newValue, "<span>" + newValue + "</span>");
      }
      else {
        $scope.newParagraph = $scope.paragraph;
      }
    }
  });

CSS

span {
  color: red;
}

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

2 个答案: