Interactive drop-down menus created on the fly

I am currently working on dynamically generating inputs using Angular and Angular Material. Each time the user clicks on the Add button, a new dropdown should be created. However, I am encountering an error message that says:

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

What changes do I need to make in my code to resolve this issue?

<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 });
};

Answer №1

It seems like the issue may stem from capitalization: .name compared to .Name:

  • Sample:

    {{selectionDemo.Name}}
    
  • Script:

    myData.filterRows.push({ 'value': 'filter' + newItemNo, 'name': 'filter' + newItemNo });
    

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to detect when the user closes a tab or browser in HTML?

I am currently developing a web application using the MVC architecture and I need to find a way to detect when a user closes their browser tab so that I can destroy their session. My tech stack includes jsp (html, js) and java. Any suggestions on how to ...

Can JavaScript be used to update/override Prototype version 1.4 to version 1.7 on a different website?

(I'm uncertain about the best way to phrase this question, feel free to make changes). I am in the process of embedding a JS widget onto a different website that is using Prototype.js Version 1.4. I have incorporated jQuery into my widget and have it ...

Establishing a pair of separate static directories within Nest

I am looking to utilize Nest in order to host two static applications. Essentially, I have a folder structure like this: /public /admin /main Within my Nest application, I currently have the following setup: app.useStaticAssets(join(__dirn ...

Background of jQuery-UI Slider

Can the background color of a jQuery-UI Slider widget be set using JavaScript? This is the default setting: What I am trying to accomplish is the following: The green range should be determined based on historical data. I want to visually show the user ...

The v-on:click event handler is not functioning as expected in Vue.js

I am currently learning vue.js and facing some challenges. Below is the code snippet from my HTML page: <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net ...

Issue with ng-selected when used alongside ng-options or ng-repeat in Angular

My application features a form where users can fill out their starting point and choose from 350 possible destinations to get directions using Google Maps. Users can select their destination by either clicking on a pin on the map or choosing from a drop-do ...

Utilize the $setValidity function within ng-repeat to validate input fields

I am facing an issue with my form that is being repeated in an ng-repeat. Below is a snippet of the form. I need to implement custom validation using $setValidity in the controller. However, I am struggling to access input names by index in the controlle ...

What is the process for displaying images fetched from the API?

Currently, my front-end is built using React/Redux and the API side with AdonisJS. All of my images are stored within the API, and I need to find a way to display them on the front-end. Can anyone provide guidance on accomplishing this task? ...

Is there a way to extract values from a particular object?

Currently, I am utilizing a JSON server to establish a straightforward login system. The data stored on the server is structured as follows: { "users": [ { "name": "user1", "password": "pass1", "email": "<a href="/cdn-cgi/l/emai ...

Switch the style sheets after the content

How can I create a toggle effect on the :after property, switching between + and - each time the link is clicked? I've attempted to achieve this using JavaScript, CSS, and HTML, but the code only changes + to - and doesn't switch back when the l ...

The function screen.getByText is not available in this context

My experience with jest and react-testing-library has been smooth for the most part, but I encountered some challenges when transitioning to the screen > getByText/etc testing method. Test describe('test the dashboard when loaded', () => { ...

Creating a Delicious Earth Progress Pie

I'm looking to incorporate a unique progress bar design on my website, similar to this one: The progress pie Can anyone guide me on how to create a progress pie with an image inside it that changes color as it moves? ...

What is the reason for the inability to input a null byte in a file when using ascii mode with node.js?

Below is the code snippet I have written: var fs = require('fs'); var fp = fs.openSync('binary.txt', "w"); var byte = '\0'; fs.writeSync(fp, byte, null, 'ascii'); However, upon execution, when I check the con ...

How to position an image on the left side using AngularJS in an HTML

In the image, you can see rows. This is the code for the view: <div layout="row" layout-align="space-around center" > <product-image-thumbnail layout="row" layout-align="left center" src="vm.callFunction(field)" setter="vm.callFunction(v ...

Angular loop is unable to detect changes in the updated list

My Angular application is facing a peculiar issue that I can't seem to figure out. // Here are the class attributes causing trouble tenants: any[] = []; @Input() onTenantListChange: EventEmitter<Tenant[]>; ngOnInit(): void { this. ...

Centering an image that is absolutely positioned within a container that is relatively positioned, horizontally

Looking to center an image that is positioned absolutely horizontally within a container that is relatively positioned. After attempting with CSS and not finding success, I ended up using Jquery. http://jsfiddle.net/CY6TP/ [This is my attempt using Jquery ...

How is it possible that the SetTimeout code continues to run even after calling clearTimeout

I have this code snippet within my react component: //some code var timeout = null; //global variable //some more code useEffect(() => { if(...some condition) { console.log('test1'); timeout = setTimeout(() => { ...

Detach an item from its parent once it has been added to an array

Currently, I am facing an issue with a form on my blog. The blog is represented as an object that contains multiple content objects within it. I seem to be experiencing some confusion because the reactivity of the content I add to the Array persists with t ...

Using jQuery to delay hiding for 2 seconds

Hey there! I'm facing an issue with my code. The function is supposed to make #aboutPopOut slide to the left, and then after a 2-second delay, fade out the fadescreen by hiding it. The sliding part works fine, but the waiting and hiding do not seem to ...

Mixed Protocol Error (HTTP/HTTPS)

I'm experiencing a mixed content error on my website, as it is using both http and https protocols. Chrome console displays the following error: Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpReques ...