Question

这是我的angularjs代码，用于动态创建输入文本字段。

<form action="demo_form.asp" method="get">
    //statically added textfields
    value1:<input type="text" placeholder="Give inspection details. Eg. 10:00." ng-model="store.static1" required />
    value2:<input type="text" placeholder="Give inspection details. Eg. 10:00." ng-model="store.static2" required />

    //dynamically adding textfields
    enter the number of new fields to be created:<input type="number" id="in_num"  />
    <button type="button" id="submit"> Create text fields </button>
    <div id="dynamicInput" ></div></td>

    //button to add values to the database
    <button type="submit" ng-click="addValues($event)> add to database </button>
</form>

“ng-click =”addValues（$ event）“”有助于将这些值添加到我已经完成的mongodb数据库中。

用于制作这些字段的JavaScript代码是：

 $(document).ready(function(e){
$('#submit').click(function(){     
 var inputIndex = $('#in_num').val();
    for( var i=0; i<inputIndex; i++)
    {
      $('#dynamicInput').append('<input type=text  id=id_'+ i +' style=width:100%; padding:12px 15px  ng-model=store.value'+i+'/>');
    }
});
});

单击“添加到数据库”按钮时，仅第一个和第二个文本字段的值将添加到数据库中，但不会添加从动态创建的文本字段中添加的值。有没有办法做到这一点？

Answer 1

为什么不通过Add new text box on click of a button in angular js

http://www.shanidkv.com/blog/angularjs-adding-form-fields-dynamically

Answer 2

问题是，当您使用jQuery添加它们时，动态添加的输入字段没有click事件。添加ng-click是不够的。你必须使用$compile让angular解析这个元素。

然而，更聪明的方法是根本不使用jQuery，并使用ng-repeat角度生成字段。

angular
  .module('app', [])
  .controller('dynamicFieldsController', dynamicFieldsController);

dynamicFieldsController.$inject = ['$scope'];

function dynamicFieldsController($scope){
  var vm = this;
  vm.numOfFields = 0;
  vm.fields = [];
  vm.add = function() {
    for (var i = 0; i < vm.numOfFields; i++) {
        var index = vm.fields.length;
        vm.fields.push(index);
    }
  }
}

input{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='dynamicFieldsController as vm'>
  <input placeholder='num of fields' ng-model='vm.numOfFields'>
  <button ng-click='vm.add()'>add</button>
  <input type='text' ng-repeat='field in vm.fields' value='{{ field }}'>
</div>

在此示例中，您可以添加任意数量的元素并将ng-click事件绑定到它们。它们可以开箱即用，因为它采用棱角分析。您的addValues函数现在只需使用vm.fields将值实际添加到数据库中。

如何将ng-model添加到动态创建的输入文本字段中

2 个答案: