In Angular how can you dynamically add an input to be applied once

Question

I have searched the web and found no example. I wonder if someone could help.

I have two instances of a dropdown or maybe more and I want to apply the add input dynamically to only that form but it applies to everyone with that ng-model everywhere on the web page.

The code is here https://plnkr.co/edit/PPDYKjztPF528yli9FbN

HTML:
        <div class="main-content__right" ng-controller="QuestionController">
      <div ng-repeat="element in questionList">
        <fieldset>
        <div ng-repeat="choice in formOptionData track by $index">
          <a class="remove-field remove u-pull-right" ng-click="remove()">Remove</a>
          <input id="input{{choice.name}}" placeholder="{{choice.label}}" type="number" name="{{choice.name}}">
        </div>  
          <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>
          {{formData}}
        </div>
        </fieldset>
      </div>
    </div>

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

        $scope.selectedValue = {};
    $scope.questionList = [{
      "sectionTitle": "Travel",
      "inputType": "select",
      "inputElement": [{
          "label": "Public transport",
          "name": "travelOutgoing",
          "helpInfo": "include train journeys",
          "type": "select"
        }, {
          "label": "Taxis",
          "name": "travelOutgoing",
          "type": "select"
        }

      ]
    },
    {
  "sectionTitle": "Leisure",
  "title": "Enter the amount you spend on entertainment and leisure. Leave them blank if they don\"t apply to you.",
  "inputType": "select",
  "inputElement": [
  {
    "label": "Eating out",
    "name": "leisureOutgoing",
    "helpInfo": "Include coffees, teas and snacks",
    "type": "select"
  },
  {
    "label": "Going out",
    "name": "leisureOutgoing",
    "helpInfo": "Include drinks, taxis, admission charges",
    "type": "select"
  }
   ] }

    ];

         $scope.onCategoryChange = function(selectedItem) {
            this.formOptionData.push(selectedItem);
        };
         $scope.remove = function(element) {
            this.formData.splice(element,1);
        };

  });

Using the same `ng-model` for multiple fields means you're explicitly asking for them all to be bound to the same variable (in this case `$scope.selectedValue`). Use different `ng-model`s for different fields. — Daniel Beck, Jan 19 '16 at 15:36
@DanielBeck, my fields are dynamic coming from a json file so its a bit difficult to add unique fields to ng-model. — NiseNise, Jan 19 '16 at 16:08
ng-model can contain dynamic fields. See http://stackoverflow.com/questions/12553617/how-can-i-set-a-dynamic-model-name-in-angularjs for example. — Daniel Beck, Jan 19 '16 at 16:12

In Angular how can you dynamically add an input to be applied once

0 Answers0