Question

我正在尝试使用jQuery和Angular js更改段落的字体大小。

每当用户更改字体大小时， 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>

Answer 1

它的工作......

你必须使用ng-change ...

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

jQuery在值的变化上设置fontsize奇怪的行为

1 个答案: