0

i want to create a form dynamically from a json string that is coming from a database. I am new to angularjs and I would like to know how to create a dropdown control dynamically within a repeater. Below is an example of my code var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.fields = [
  {"reference_id":209,"form_id":1,"name":"firstname","label":"First               Name","type":"text"},
    {"reference_id":210,"form_id":1,"name":"lastname","label":"Last Name","type":"text"},
    {"reference_id":211,"form_id":1,"name":"email","label":"Email","type":"text"},
    {"reference_id":212,"form_id":1,"name":"picture","label":"Picture","type":"file"},
    {"reference_id":213,"form_id":1,"name":"address","label":"Address","type":"file"},
    {"reference_id":214,"form_id":1,"name":"select","label":"values","select       ng-model":"select"},   ];
user3258918
  • 39
  • 1
  • 8

1 Answers1

0

As was mentioned in a comment, you'll want to use ngOptions.

Plunk example

You'll want to structure your html similar to this:

<select ng-model="currentField" ng-options="field.reference_id as field.label for field in fields"></select>

currentField will always result in a reference_id being selected. You can change it to name or any of the other properties of $scope.fields.

EnigmaRM
  • 7,523
  • 11
  • 46
  • 72
  • thank you for your insight. I am still a bit confused though since i want to build out a dynamic form which will include input textboxes/radio/checkboxes/dropdowns etc. If I were to change the model value of the last element to something like this: {"reference_id":214,"form_id":1,"name":"select","label":"values","type":"select", "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] }how would i decipher in my repeater to handle/distinguish this field? thank you so much for your help – user3258918 Mar 17 '14 at 21:16
  • I have no idea what you mean. haha. – EnigmaRM Mar 17 '14 at 21:21
  • @user3258918 it sounds like you want the form to build out dynamically based on a drop down? It's possible, but I'd need to have a better idea of what you are wanting the final product to be. Also, what things have you tried? – EnigmaRM Mar 17 '14 at 21:22
  • im pretty new to angular so i am unsure of how to build out a dynamic select control from a json string. text/radio and i am hoping select seems pretty straight forward i was hoping dropdowns would similar in angularjs – user3258918 Mar 17 '14 at 21:27
  • It still is not clear what you want. Is that what you're looking for: A `select` box where an individual selects firstname, and then you create the input field for that? – EnigmaRM Mar 17 '14 at 21:38
  • No, I want to create a dynamic form from the json string. That is, three if the fields may be of type input text box but two May be dropdwn with values . A simple example of the end product would be first last name address (all text) gender state(drop downs) see plker http://plnkr.co/tOe0fcpToBkupx0kSCKz – user3258918 Mar 17 '14 at 22:16
  • You continue to send the same plunker link. that is not helpful. It may be more helpful if you take the time to write a new question and provide screenshots of what you are wanting to have happen. Regardless: here is an option to dynamically build forms: http://plnkr.co/edit/FFAeQlM2eUCv6pV8urYZ?p=preview. There are other ways as well, but we'll just wait for you to create a new question. – EnigmaRM Mar 17 '14 at 22:30
  • I apologize for not being clear. But I think I've found a similar solution as to what I want to achieve here http://jsfiddle.net/StevenLJackson1/9Uf6C/7/ again thank you for your patience and help :) – user3258918 Mar 17 '14 at 23:28