Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strong>Update:</strong> You can use a function like this to fetch your params from model. (accroding to your data structure)</p> <p>Another forked plunker: <a href="http://plnkr.co/edit/mdKBoEffoUo2ilH7Jd3L?p=preview" rel="nofollow">http://plnkr.co/edit/mdKBoEffoUo2ilH7Jd3L?p=preview</a></p> <pre><code>$scope.getModels = function(items) { var params = {}; if (angular.isArray(items)) { for (var i = 0; i &lt; items.length; i++) { var item = items[i]; if(angular.isArray(item.fields)) { for (var j = 0; j &lt; item.fields.length; j++) { var field = item.fields[j]; params[field.id] = field.model; } } } } alert(JSON.stringify(params, '', 4)); }; </code></pre> <hr> <p>Since dynamic input name hasn't been implemented yet (<a href="https://github.com/angular/angular.js/pull/4791" rel="nofollow">Relatived PR here</a>), I inserted a nested <a href="http://docs.angularjs.org/api/ng.directive%3angForm" rel="nofollow"><code>ng-form</code></a> for validation. And because that, I think you have to manage form submittion yourself by using <code>ngModel</code>.</p> <p>Check the forked exmaple here: <a href="http://plnkr.co/edit/8cP5YMKUGu6LfBCsRxAZ?p=preview" rel="nofollow">http://plnkr.co/edit/8cP5YMKUGu6LfBCsRxAZ?p=preview</a></p> <p>Template:</p> <pre><code>&lt;div class="form-group" ng-form="form" ng-class="{true: 'has-error', false: 'has-success'}[form.fieldName.$invalid]"&gt; &lt;label class="control-label col-sm-2" for="fieldName"&gt;{{fieldLabel}}&lt;/label&gt; &lt;div class="col-sm-6"&gt; &lt;input class="form-control" type="{{fieldType}}" placeholder="enter valid name" name="fieldName" ng-model="fieldModel" ng-minlength=3 ng-maxlength=20 required/&gt; &lt;span class="help-block"&gt; &lt;span ng-show="form.fieldName.$error.required"&gt;Required field&lt;/span&gt; &lt;span ng-show="form.fieldName.$error.minlength"&gt;Too few chars - min is (6)&lt;/span&gt; &lt;span ng-show="form.fieldName.$error.maxlength"&gt;Too much chars - max is (20)&lt;/span&gt; &amp;nbsp; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>HTML:</p> <pre><code>&lt;form-field ng-repeat="field in tabItem.fields" ng-model='field.model' field-type="field.type" field-name='field.id' field-label='field.label'&gt; &lt;/form-field&gt; </code></pre> <p>JS:</p> <pre><code>KPNDirectives.directive("formField", function () { return { restrict: 'E', scope: { fieldModel: '=ngModel', fieldType: '=', fieldLabel: '=', fieldName: '=' }, templateUrl: 'formField.html' }; }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload