動的に作成された入力テキストフィールドにng-modelを追加する方法

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クリック=」addValues（$イベント）「」私はすでに行っているのMongoDBデータベースにこれらの値を追加することができます。これらのフィールドを作るために使用されるJavaScriptコード

です：のみ第一及び第二のテキストフィールドからの値がデータベースに追加getingされているが、値から追加されていません「データベースに追加する」ボタンをクリックすることで

$(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

経由しないのはなぜ問題は、あなたがjQueryを使ってそれらを追加するとき、あなたの動的に追加の入力フィールドは、クリックイベントを持っていないということです。 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を使用するだけです。

Answer 2

あなたはAdd new text box on click of a button in angular js

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