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

Question

我有一个下拉列表，当用户从下拉列表中选择任何选项时，每个选择都会出现一个文本框。 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);
      }
})

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

Answer 1

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

让我们先看看你的问题。

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

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

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

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()"/>