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

我正在打字导师。我通过一个数组静态显示一些数据我想要的是当某些给定段落的数据上的用户输入被匹配时，段落的匹配文本的颜色应该被改变.. 我希望它会通过DOM操作来完成，并尝试了很多次，找不到合适的解决方案。动态更改angularjs中的静态段落颜色

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

来源

2016-02-29 RohanArihant

是你想改变颜色还是整个段落的单词。所以，如果我正确理解了输入元素中的用户类型，例如textarea，并且您想要更改整个文本区域的颜色。我对吗？ – jstuartmilne

请你可以创建一个plunker（https://plnkr.co/）？ – Hornth

您可以使用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

来源

2016-02-29 10:31:11 etiennecrb

感谢兄弟的工作，因为我想.... – RohanArihant

你可以使用ngBindHtml - Plunker

标记

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

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

来源

2016-02-29 10:55:24

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

回答

相关问题