从视图中的动态文本框发送数据到 AngularJS 控制器

Posted 2023-05-09

【中文标题】从视图中的动态文本框发送数据到 AngularJS 控制器

【英文标题】：Send data from dynamic textbox in view to AngularJS controller

【发布时间】：2017-04-13 23:14:46

【问题描述】：

我有一个下拉列表，当用户从下拉列表中选择任何选项时，每个选择都会出现一个文本框。 html-

<select id="nut">
                        <option>---select---</option>
                        <option value="N1">N1</option>
                        <option value="N2">N2</option>
                        <option value="N3">N3</option>
                        <option value="N4">N4</option>
</select>
<div id="holder"></div>
<input type="submit" value="save" ng-click="savedata()"/>

javascript-

$("#nut").change(function () 
    val = $(this).val();
    var ctr = '<input type="text" name="' + val + '"/>';
    $('#holder').append(ctr);
);

现在我想在单击保存按钮时使用 AngularJS 控制器在数据库的新行中插入所有这些文本框的值。

我知道如何通过使用 data-ng-model 绑定表单元素数据来为普通表单元素执行此操作。但是在没有的情况下如何实现这一点。表单元素的数量是可变的。

我试过这样做，

var ctr = '<input type="text" name="data.' + val + '" data-ng-model="data.' + val + '"/>';

<input type="submit" data-ng-click="savedata(data)"/>

AngularJS 控制器-

.controller('testController', function ($scope, $http, $location) 
      $scope.savedata = function (data) 
         debugger;
         alert($scope.data);
      
)

但这给出了未定义的数据值。 那么还有什么办法呢？

【问题讨论】：

链接阶段在您的页面完成加载后完成，因此 IU 认为您使用 JQuery 动态创建的输入无法与 Angular 绑定。您可以满足您的需求，但它根本不是直接和 Angular 推荐的方式。

【参考方案1】：

使用 AngularJS 的数据驱动方法并远离 jQuery 方法来解决问题。您可以按照下面的解决方案。

让我们先看看你的问题。

您有要显示的标签/标签列表。 用户输入的文本必须与用户在选择选项中选择的标签/标签相关联 如果未从选择菜单中选择任何选项，则不会显示文本输入字段 一旦用户选择一个标签并输入相应的标签，然后按提交。您想将数据保存到后端/数据库。

让我们为此创建一个干净的解决方案。

我们将首先为此开发控制器并设置所需的变量和模型。

angular.controller('testController',['$scope','$http','$location',function($scope,$http,$location)

  $scope.optionsList = ['N1','N2','N3','N4','N5']; //List of options to be displayed in select
  $scope.selectedOption = 'Select Tags'; //Variable to store the selected option      
  $scope.textFilled = ''; //this model will store the text entered by the user
  $scope.showTextField = false;// this model will decide when to show the text-field

  $scope.switchTextFieldStates = function()
      if($scope.selectOptions != 'Select Tags')
        $scope.showTextFields = true;
      else 
        $scope.showTextFields = false;
      
      $scope.textFilled = ''; //This will ensure that if user changes the option then previously filled data is cleared out of the model
  

  $scope.saveData = function()

      console.log($scope.selectedOption,$scope.textFilled);
//Do whatever you want to do here with the data you got
 //Reset the state of the view 
      $scope.showTextFields = false;
      $scope.textFillled = '';
      $scope.selectedOptions = 'Select Tags';
 

];

让我们为这个问题创建一个合适的 HTML 模板。

<select ng-options="item as item in optionsList" ng-model="selectedOption" ng-change="switchTextFieldStates()"></select>

<div id="holder" ng-show="showTextFields"><input type="text" ng-model="textFilled"/></div>
<input type="submit" ng-click="saveData()"/>

【讨论】：

谢谢！这很好用。但这会一一保存数据。如果我想一次保存多个文本字段中的值怎么办？