如何將ng-model添加到動態創建的輸入文本字段

這是我的angularjs代碼，用於動態創建輸入文本字段。如何將ng-model添加到動態創建的輸入文本字段

<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點擊=」 addValues（$事件）「」幫助這些值添加到我已經做了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+'/>'); 
    } 
}); 
});

在點擊「添加到資料庫」按鈕，只從第一和第二文本框的值歌廳添加到數據庫中，但是從增加不是值動態創建文本字段。有什麼辦法可以做到嗎？

來源

2016-11-29 pallavi

你正在混合jQuery和角度的方式，不工作得很好。這沒有乾淨的解決方法。 –

**建議：**不要用jQuery生成元素，你可以通過'ng-repeat'來創建一個對象數組和循環！ '模型'將在那裏設置！ –

問題是，當你用jQuery將它們添加您的動態添加輸入字段沒有click事件。僅添加ng-click是不夠的。您將不得不使用$compile來讓角度解析這個元素。

但是，更聰明的方法是根本不使用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實際將值添加到數據庫。

來源

2016-11-29 10:05:48