Dynamically generated drop downs

Question

I am trying to generate dynamically inputs with angular and angular material. Whenever the user clicks on the Add button a new dropdown needs to be generated. Right now I got the following error :

'Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{choiceTest.Name}}] starting at [{choiceTest.Name}}].'

How do I need to modify my code to work properly?

<div ng-repeat="choiceTest in $ctrl.inputsFilterRowsTest">
  <md-input-container flex="30">
    <label>Filter Type</label>
      <md-select ng-model={{choiceTest.Name}} name="">
        <md-option ng-repeat="filter in $ctrl.filters" value="{{filter.value}}">
          {{filter.value}}
         </md-option>
      </md-select>
  </md-input-container>
</div>
<md-button class="md-raised" ng-click="$ctrl.addFilterTest()">ADD</md-button>

Controller

self.inputsFilterRowsTest = [];

self.filters = [
   { value: 'Filter1' },
   { value: 'Filter2' },
   { value: 'Filter3' }
];

self.addFilterTest = function () {
    var newItemTestNo = self.inputsFilterRowsTest.length + 1;
    self.inputsFilterRowsTest.push({ 'value': 'inputFilter' + newItemTestNo, 'name': 'inputFilter' + newItemTestNo });
};

Remove the interpolation from the `ng-model` directive, e.g. `ng-model="choiceTest.Name"` without the curley brackets `{{ }}`. — georgeawg, Nov 12 '18 at 00:24

score 2 · Accepted Answer · answered Nov 12 '18 at 00:18

2

I think the problem might be capitalization: .name vs. .Name:

Template:
```
 {{choiceTest.Name}}
```

Code:

 self.inputsFilterRowsTest.push({ 'value': 'inputFilter' + newItemTestNo, 'name': 'inputFilter' + newItemTestNo });

answered Nov 12 '18 at 00:18

paulsm4

114,292
17
138
190

Dynamically generated drop downs

1 Answers1