如何将ng-model添加到动态创建的输入文本字段中 [英] how to add ng-model to dynamically created input text fields

问题描述

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

This is my angularjs code to create input text fields dynamically.

<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数据库中。

"ng-click="addValues($event)"" helps add these values to a mongodb database which i have already done.

用于生成这些字段的javascript代码为：

javascript code used to make these fields is:

 $(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+'/>');
    }
});
});

单击添加到数据库按钮时仅显示值从第一个和第二个文本字段添加到数据库但不是从动态创建的文本字段添加的值。是否存在任何方法吗？

On clicking the "add to database" button the values only from first and second textfields are geting added to the database but not the values added from the dynamically created textfields. Is there any way to do it?

推荐答案

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

Problem is that your dynamically added input fields do not have a click event when you add them with jQuery. Adding ng-click is not enough. You would have to use $compile to let angular parse this element.

然而，更聪明的方法是根本不使用jQuery，让字段由angular本身生成 ng-repeat 。

However, the much smarter way is to not use jQuery at all and let the fields be generated by angular itself with 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 来实际将值添加到数据库中。

In this example you can add any number of elements and bind ng-click events to them. They will work out of the box, since parsed with angular. Your addValues function now simply has to use vm.fields to actually add the values to database.

这篇关于如何将ng-model添加到动态创建的输入文本字段中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！