CODEWITHSUNDEEP
javascripthtmlangularjs
RohanArihant
RohanArihant

Reputation: 2730

dynamically change the color of static paragraph in 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.

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

Upvotes: 2

Views: 351

Answers (2)

camden_kid
camden_kid

Reputation: 12813

You could use ngBindHtml - Plunker

Markup

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

Upvotes: 0

etiennecrb
etiennecrb

Reputation: 597

You can use ngClass directive:

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

With the CSS:

.match {
  color: green;
}

And the javascript code:

$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.

DEMO

Upvotes: 3

Related Questions