个人中心
gpt4 book ai didi

javascript - Anjularjss ng-options 不起作用选择

转载 作者：行者123 更新时间：2023-12-02 14:46:18 26 4
gpt4 key购买 nike

我正在尝试使用 ng-options 用一些数字填充选择。这是我的代码:

   <!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{
          margin-top: 50px;
          height:700px;
          width: 1400px;
          font-size:17px;  
      }



  </style>

        <script src="jscolor.js"></script>
</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="changeFont()">
            Color: <input type="color"    ng-model="ColorPicked">


           </select>   


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


           </p>




      </div>







     <script>

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

             $scope.color = "black";

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




                         $scope.changeFont = function(){
                            var newSpan = "<span id='one' style='font-size:'"+$scope.kys_selected_font+"'>  </span>"
                             $("#one").focus();
                             $("#content").append();
                             var spans = document.getElementsByTagName('span');

                            if($scope.selectedText!=""){
                                  for( i=0;i < spans.length;i++){


                              for( j=0;j < selectedText.length;j++){

                             var id = spans[i].id;
                          var   selectedId =  $scope.selectedText[j].id;
                             var  text = $("#"+id).clone().children().remove().end().text();
                            var fontSize = $("#"+id).css("font-size");         
                             var selectedinnerText =  $("#"+selectedId).clone().children().remove().end().text();;

                             if(fontSize == $scope.)

                                  if(id === selectedId){

                                   if(text === selectedinnerText){

                                           if(fontSize == $scope.kys_selected_font){

                                           }       
                                   else{
                                         $("#"+id).css("font-size",10+"px");
                                   }




                                   }
                                 else{

                                      var replacer = document.getElementById(id);
                                         var newElement = "<span style='font-size:10px;' id='one4'>"+selectedinnerText+"</span>";


                                        replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText,newElement);

                                       }

                                   }


                              }
                       }


                   }


                       };


                     $("span").mouseup(function(){
                               var range = window.getSelection().getRangeAt(0);
                             content = range.cloneContents();
                             var select = content.querySelectorAll('span'); 
                                    $scope.selectedText = select;

                     });  




                 });








     </script>
</body>

</html>

选择始终为空。

最佳答案

您尚未关闭 Controller 。添加});在您的$scope.changeFont之后功能。

此外，请在发布问题之前格式化您的代码。对于试图帮助您的人来说，阅读这本书简直是一场噩梦，但它可以帮助您发现此类问题。

编辑

在您的 $scope.changeFont 中函数你有这一行 if(fontSize == $scope.) 。我想你希望它是 if(fontSize == $scope.FontSize) 。我在下面的代码片段和 <select> 中更改了它已有人居住。是否$scope.changeFont按您的意图工作，我不知道，这超出了这个问题的范围。

此外，在您的 HTML 中您有一个 <input>在<select>内您需要移动它。

<!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 {
      margin-top: 50px;
      height: 700px;
      width: 1400px;
      font-size: 17px;
    }
  </style>

  <!--<script src="jscolor.js"></script>-->
</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="changeFont()">
    </select>
    Color: <input type="color" ng-model="ColorPicked">
  </div>

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

      $scope.color = "black";

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

      $scope.changeFont = function() {
        var newSpan = "<span id='one' style='font-size:'" + $scope.kys_selected_font + "'>  </span>"
        $("#one").focus();
        $("#content").append();
        var spans = document.getElementsByTagName('span');

        if ($scope.selectedText != "") {
          for (i = 0; i < spans.length; i++) {

            for (j = 0; j < selectedText.length; j++) {

              var id = spans[i].id;
              var selectedId = $scope.selectedText[j].id;
              var text = $("#" + id).clone().children().remove().end().text();
              var fontSize = $("#" + id).css("font-size");
              var selectedinnerText = $("#" + selectedId).clone().children().remove().end().text();;

              if (fontSize == $scope.FontSize)
                if (id === selectedId) {
                  if (text === selectedinnerText) {
                    if (fontSize == $scope.kys_selected_font) {

                    } else {
                      $("#" + id).css("font-size", 10 + "px");
                    }
                  } else {

                    var replacer = document.getElementById(id);
                    var newElement = "<span style='font-size:10px;' id='one4'>" + selectedinnerText + "</span>";


                    replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText, newElement);
                  }
                }
            }
          }
        }
      };


      $("span").mouseup(function() {
        var range = window.getSelection().getRangeAt(0);
        content = range.cloneContents();
        var select = content.querySelectorAll('span');
        $scope.selectedText = select;
      });
    });
  </script>
</body>

</html>

关于javascript - Anjularjss ng-options 不起作用选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36587558/

26 4 0
文章推荐： javascript - 如何使用 Selenium IDE 测试损坏的图像？
文章推荐： javascript - 基本的 hasClass jquery 问题
文章推荐： javascript - 从 CSV 文件中解析\r 字符串
文章推荐： javascript - 使用 jQuery 和 Ajax 提交表单的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com