angularjs - How to add a text box on submit in angular -
i pretty new angular , documentation on official site , using plunkr able figure out use ng-repeat , push method add new dom if not wrong.
i trying go through example found on docs:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>example - example-ngcontroller-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> <!--<script src="app.js"></script>--> <script> angular.module('controllerasexample', []) .controller('settingscontroller1', settingscontroller1); function settingscontroller1() { this.name = "john smith"; this.contacts = [ {type: 'phone', value: '408 555 1212'}, {type: 'email', value: 'john.smith@example.org'} ]; } settingscontroller1.prototype.greet = function () { alert(this.name); }; settingscontroller1.prototype.addcontact = function () { this.contacts.push({ value: ''}); }; settingscontroller1.prototype.removecontact = function (contacttoremove) { var index = this.contacts.indexof(contacttoremove); this.contacts.splice(index, 1); }; settingscontroller1.prototype.clearcontact = function (contact) { contact.type = 'phone'; contact.value = ''; }; </script> </head> <body ng-app="controllerasexample"> <div id="ctrl-as-exmpl" ng-controller="settingscontroller1 settings"> <label>name: <input type="text" ng-model="settings.name"/></label> <button ng-click="settings.greet()">greet</button><br/> contact: <ul> <li ng-repeat="contact in settings.contacts"> <select ng-model="contact.type" aria-label="contact method" id="select_{{$index}}"> <option>phone</option> <option>email</option> </select> <input type="text" ng-model="contact.value" aria-labelledby="select_{{$index}}" /> <button ng-click="settings.clearcontact(contact)">clear</button> <button ng-click="settings.removecontact(contact)" aria-label="remove">x</button> </li> <li><button ng-click="settings.addcontact()">add</button></li> </ul> </div> </body> </html>
this kind basic overview understood, not able figure out how ng-repeat helping add new element(push new element). far can see acting iterator in java.
to angular way, have array of text field meta values, e.g.
formfieldarr = [{fieldname: 'name', minlength: '2' ... } , {fieldname: 'gender', minlength: '4' ... }]
have ng-repeat loop on , render text fields.
in html
<div ng-repeat="formfieldarr"> <input name="formfield.name" ng-minlength="formfield.minlength"> </div>
in submit codes, need add array , form fields rendered.
formfieldpost.save(){ onsuccess: formfieldarr.push("{fieldname: 'gender', minlength: '4' ... }"); }
if thinking in terms of dom, more of jquery solution.
expanding further, use same array render different kinds of form fields.
formfieldarr = [{fieldname: 'name', minlength: '2', fieldtype: 'select' ... } , {fieldname: 'gender', minlength: '4', fieldtypre: 'text' ... }]
in html
<div ng-repeat="formfieldarr"> <input name="formfield.name" ng-minlength="formfield.minlength" ng-show="formfield.fieldtype === 'text'"> ... similar ng-show select. </div>
(typing on mobile)
Comments
Post a Comment