Обратная связь в реальном времени от динамически создаваемых текстовых полей - PullRequest
Новая
       1

Обратная связь в реальном времени от динамически создаваемых текстовых полей

0 голосов
/ 07 января 2019

Разработчик 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>

1 Ответ

0 голосов
/ 22 января 2019

Я не совсем уверен, что это то, что вы искали из кода, который вы имели, но, основываясь на вашем исходном вопросе, я думаю, что это будет сделано.

По сути, вы просто хотите, чтобы пользовательский интерфейс создавал массив строк, а затем представлял их ниже как путь к каталогу, верно? У вас действительно была большая часть рабочего кода, но вам просто нужно было объединить все элементы массива в конце, чтобы представить их как одну строку. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...