[angularjs]Jquery 设置字号值奇怪的行为变化

发布时间: 2017/4/16 4:05:49
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我试图改变使用 jquery 和角 js paragrapgh 的字体大小。 每当用户更改字体大小的p 标签字体大小会发生变化,它工作正常。但小的 Bug 即每当用户设置的值字体大小的变化,但如果他减少它,它不减少而增加。和老虎钳一样,许多这些类型的类似的行为发生。

这是我的代码︰

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

有人能帮我修复此问题??三江源

解决方法 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>
赞助商