2016-04-06 4 views
0

jQueryとAngular jsを使用して段落のフォントサイズを変更しようとしています。jQueryは値の変更時にフォントサイズを設定します。奇妙な動作

ユーザーがフォントサイズを変更するたびにpタグのフォントサイズが変更されます。 うまくいきます。しかし、ユーザーがフォントサイズを変更すると小さなバグが発生しますが、フォントサイズが小さくなると減少するのではなく増加し、の逆の場合はになります。

これは私のコードです:

<!DOCTYPE html> 
<html> 

<head> 
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 


     <style> 
      p{ 
       height: 600px; 
       width: 600px; 
       font-size:17px; 
      } 



     </style> 
    </head> 
    <body> 



      <div ng-app="myApp" ng-controller="editor"> 
      <label for="kys_font_size"> font size:</label> 

      <select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)"> 
       </select> 



      </div> 


    <p contenteditable="true" id="content" > 


     </p> 


     <p></p> 

     <script> 

      var app = angular.module('myApp',[]); 
      app.controller('editor',function($scope){ 

       $scope.FontSize = function(start, end) { 
             var size = []; 
             for (var i = start; i <= end; i++) { 
             size.push(i); 
             } 
          return size; 
         }; 


        $("#fontsize").on('change',function(){ 
          $("#content").css("fontSize",$scope.kys_selected_font+"px"); 

        }); 
      }); 

     </script> 
    </body> 



</html> 
+0

それはあなたが持っているものの古い値をとります選択された。 – nisar

+0

これはどのように修正できますか? – Jois

答えて

0

その作業...

あなたはngの変更を使用する必要があります...

<!DOCTYPE html> 
<html> 

<head> 
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 


     <style> 
      p{ 
       height: 600px; 
       width: 600px; 
       font-size:17px; 
      } 



     </style> 
    </head> 
    <body> 



      <div ng-app="myApp" ng-controller="editor"> 
      <label for="kys_font_size"> font size:</label> 

      <select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="update()"> 
       </select> 



      </div> 


    <p contenteditable="true" id="content" > 


     </p> 


     <p></p> 

     <script> 

      var app = angular.module('myApp',[]); 
      app.controller('editor',function($scope){ 

       $scope.FontSize = function(start, end) { 
             var size = []; 
             for (var i = start; i <= end; i++) { 
             size.push(i); 
             } 
          return size; 
         }; 

      $scope.update = function(){ 
       $("#content").css("fontSize",$scope.kys_selected_font+"px"); 
      } 



      }); 

     </script> 
    </body> 



</html> 
関連する問題