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方法转向问题。您可以按照以下解决方案。

让我们先看看你的问题。

您有要显示的标签/标签列表。
用户输入的文本必须与用户在选择选项
如果未选择选择菜单中的选项，则不显示文本输入字段
用户选择标签并输入相应的标签后，按提交。您希望将数据保存到后端/数据库。

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

我们将首先在控制器上工作并设置所需的变量和模型。

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

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

1 个答案: