How to add multiple input box dynamically with dropdown in angularjs

Question

I am having this problem which I can't find the solution to. 1) I have a dropdown list which the data is pull in from a json file 2) When the user selects a item I want to dynamically add a input box without a button.

Got a jQuery code but wanted to do it the angular way, but read that ng-Change is not the same as jquery .change?

Can anyone help or point me into the right direction of how to do this.

HTML

    <div class="main-content__right" ng-controller="QuestionController">
      <div ng-repeat="element in questionList">
        <fieldset>
          <div id="add-more" class="well">
            <div class="field">
              <div style="width:100%;" class="dropdown">
                <select name="{{options.name}}" id="select" data-ng-model="formData" 
data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" 
ng-change="onCategoryChange(formData)">
                  <option value="" data-id="null" disabled="" selected="">Select an item...</option>
                </select>
              </div>
            </div>


          {{formData}}
        </div>
        </fieldset>
      </div>

app.js

var app = angular.module("cab", []);
  app.controller('QuestionController', function($scope) {
    var $scope.formData = {};

    $scope.questionList = [{
      "sectionTitle": "Travel",
      "subTitle": "How much do you spend on these items for your car?",
      "inputType": "select",
      "inputElement": [{
          "label": "Public transport",
          "name": "travelOutgoing",
          "helpInfo": "include train journeys",
          "type": "select"
        }, {
          "label": "Taxis",
          "name": "travelOutgoing",
          "type": "select"
        }, {
          "label": "Bicycle",
          "name": "travelOutgoing",
          "helpInfo": "general running costs such as repair or rental",
          "type": "select"
        }, {
          "label": "Car rental",
          "name": "travelOutgoing",
          "helpInfo": "include fuel, parking charges and tolls",
          "type": "select"
        }

      ]
    }];

    $scope.onCategoryChange = function () {};

  });

can be found on http://plnkr.co/edit/PPDYKjztPF528yli9FbN?p=preview

jbrown · Accepted Answer · 2016-01-14 14:54:31Z

1

Your controller function needs to add each selection to an array on scope:

Controller

app.controller('QuestionController', function($scope) {
  $scope.formData = [];
  $scope.selectedValue = {};

  $scope.questionList = [{
    "sectionTitle": "Travel",
    "subTitle": "How much do you spend on these items for your car?",
    "inputType": "select",
    "inputElement": [{
    "label": "Public transport",
    "name": "travelOutgoing",
    "helpInfo": "include train journeys",
    "type": "select"
  }, {
    "label": "Taxis",
    "name": "travelOutgoing",
    "type": "select"
  }, {
    "label": "Bicycle",
    "name": "travelOutgoing",
    "helpInfo": "general running costs such as repair or rental",
    "type": "select"
  }, {
    "label": "Car rental",
    "name": "travelOutgoing",
    "helpInfo": "include fuel, parking charges and tolls",
    "type": "select"
     }]
  }];

  $scope.onCategoryChange = function(selectedItem) {
    $scope.formData.push(selectedItem)
  };

});

Then you can use an ng-repeat to render all of the items in formData.

HTML

  <fieldset>
    <div id="add-more" class="well">
      <div class="field">
        <div style="width:100%;" class="dropdown">
          <select name="{{options.name}}" id="select" data-ng-model="selectedValue" data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" ng-change="onCategoryChange(selectedValue)">
            <option value="" data-id="null" disabled="" selected="">Select an item...</option>
          </select>
        </div>
      </div>
      <div ng-repeat="item in formData track by $index">
        <input ng-model="item.label" />
      </div>
    </div>
  </fieldset>

edited Jan 14, 2016 at 14:54

answered Jan 14, 2016 at 12:51

jbrown

3,0351 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

NiseNise Over a year ago

ok that cool that works, but how I would get it add another and another currently it overwrites it??? maybe in a ng-repeat would that work?

jbrown Over a year ago

Ng-repeat is a possibility. Depends on what the model that you are binding to looks like. Can you update the controller code to include the model? Then I could give you some guidance.

NiseNise Over a year ago

if I am correct my form elements will be bind to this variable var formData = {}; Still quite new to angular so might of missed a few steps

jbrown Over a year ago

Do you expect formData to remain an object or could it be an array of objects?

NiseNise Over a year ago

I could be an array of objects

|

Collectives™ on Stack Overflow

How to add multiple input box dynamically with dropdown in angularjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related