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

【问题标题】：Real time feedback from dynamic created textbox(s)来自动态创建的文本框的实时反馈
【发布时间】：2019-01-07 19:25:34
【问题描述】：

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>

【问题讨论】：

我看到您添加的 HTML 上有 ng-model - 这是否也与 Angular 1.x 应用程序一起使用？如果是这样，您应该在角度控制器中执行此操作，并且根本不依赖 jQuery。
@ChrisBarr - 坦率地说，大部分代码都是从我通过谷歌搜索学到的东西中拼凑起来的。我主要使用 Python，所以我并不完全精通 HTML 或使用的任何不同的库。话虽如此，我很想不依赖 jQuery，但我不太确定如何仅使用角度控制器来做到这一点。
在此处发布您的角度控制器（或您可以发布的内容），我相信有办法让它工作。还将angular 标签添加到这篇文章中。 Angular 在这里会是一个更优雅的解决方案，在同一个项目中混合使用 Angular 和 jquery 通常总是一个坏主意。
好的，感谢您的建议。至于角度控制器问题，我什至不确定那是什么（尽管我现在正在阅读它）。我发布的代码基本上是我目前所拥有的。它被归结为更容易在这里发布，但没有任何额外的与 AngularJS 有任何关系。
嗯，您的代码引用了angular.min.js、ng-app 和一些ng-model，这就是为什么我认为它是有角度的。如果它不是有角度的，也许你只是从网络上其他地方的一些有角度的例子中复制/粘贴这些。如果是这种情况，您可以删除这些属性而不会造成任何伤害

标签： jquery html angularjs

【解决方案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>

【讨论】：

谢谢！这正是我一直在寻找的。再次感谢学习机会。你强迫我回去重新工作，这让我对代码有了更好的理解。 :)
很高兴我能帮上忙！