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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -