[英]how to add ng-model to dynamically created input text fields
这是我的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+'/>');
}
});
});
单击“添加到数据库”按钮后,仅来自第一个和第二个文本字段的值将被添加到数据库,而不是被动态创建的文本字段添加的值。 有什么办法吗?
问题在于,使用jQuery添加动态添加的输入字段时,没有单击事件。 添加ng-click
还不够。 您将不得不使用$compile
来使该元素进行角度解析。
但是,更聪明的方法是根本不使用jQuery,而是使用ng-repeat
由angular本身生成字段。
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
即可将值实际添加到数据库中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.