簡體   English   中英

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

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM