गतिशील रूप से बनाए गए इनपुट टेक्स्ट फ़ील्ड में एनजी-मॉडल कैसे जोड़ें

समस्या यह है कि जब आप उन्हें 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 . का उपयोग करना है वास्तव में डेटाबेस में मान जोड़ने के लिए।