Question

此处的Python开发人员试图弄清楚一些HTML。我正在使用一种内部工具，该工具允许用户创建项目的目录。因此，我设置了一种方法来动态添加和删除用于构建文件路径的文本框。但是我想实时显示正在生成的文件路径。例如，我添加了3个框，这将显示如下所示的文件路径：c：/ box1Name / box2Name / box3Name

我不确定如何实时将数据输入到这些文本框中。这可能吗？

更新：所以我一直在自我教育，我整理了代码以使用AngularJS使其全部使用。希望这将使我更容易获得帮助。基本上，我希望能够将生成的动态文本框中的值添加到其下方的输出中。

以下是一些测试代码作为示例：

<!DOCTYPE html>

<html>
    <head>
        <!-- Add Angular library -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <!-- Add Local scripts -->
        <script type="text/javascript"> 
            var app = angular.module('myApp', []);
            app.controller('dynamicAddBoxesCtrl', function($scope) {
                $scope.boxSet = {
                    boxes: []
                };
                $scope.quest = {};
            
                $scope.boxSet.boxes = [];
                $scope.addNewBox = function() {
                    $scope.boxSet.boxes.push('');
                };
            
                $scope.removeBox = function(z) {
                    $scope.boxSet.boxes.splice(z, 1);
                };
            
                $scope.inbox1_model = "";
                $scope.inbox2_model = "";
            });
        </script>
    </head>   
      
    <body ng-app="myApp" style="background: #4b4b4b!important; color: #e5e5e5; margin:0 auto;">
        <div ng-controller="dynamicAddBoxesCtrl">
            <h1>Dynamic Form Fields Creation Plugin</h1>
            <input type="button" ng-click="addNewBox()" value="ADD DIRECTORY">
            <div>
                <form data-ng-repeat="field in boxSet.boxes track by $index">
                    <input ng-model="boxSet.boxes[$index]"></input>
                    <button ng-click="removeBox($index)"> &#10006 </button>
                </form>
            </div>
            <h1>Real-Time Update</h1>
            <div>
                Inbox1: <input type="text" ng-model="inbox1_model"><br>  
                Inbox2: <input type="text" ng-model="inbox2_model"><br>                      
                <br/>
                <strong>Output: {{inbox1_model + " " + inbox2_model}}
            </div>            
        </div>
    </body>
</html>

Answer 1

我不能完全确定这是否是您所拥有的代码所要的，但是基于您最初的问题，我认为这可以做到。

基本上，您只希望UI创建一个字符串数组，然后将它们作为目录路径显示在下面，对吗？您确实确实拥有大部分工作代码，但只需要在最后将所有数组项连接在一起，即可将它们作为单个字符串显示。

angular.module('myApp', [])
  .controller('dynamicAddBoxesCtrl', function($scope) {
      $scope.boxes = ['foo', 'bar'];
      $scope.addNewBox = function() {
          $scope.boxes.push('');
      };

      $scope.removeBox = function(z) {
          $scope.boxes.splice(z, 1);
      };
  });

code {
  background: #FEFEFE;
  border: 1px solid #CCC;
  padding: 1px 2px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
          
<div ng-app="myApp" ng-controller="dynamicAddBoxesCtrl">
    <h1>Dynamic Form Fields Creation Plugin</h1>
    <button type="button" ng-click="addNewBox()">Add Directory</button>
    <form data-ng-repeat="field in boxes track by $index">
        <input type="text" ng-model="boxes[$index]"/>
        <button ng-click="removeBox($index)"> &#10006; </button>
    </form>

    <hr/>
    <div ng-if="boxes.length > 0">
        <strong>Output</strong>: <code>C://{{boxes.join('/')}}</code>
    </div>
    <em ng-if="boxes.length === 0">Nothing added yet!</em>
</div>

来自动态创建的文本框的实时反馈

1 个答案: