AngularJS ng-repeat with dynamic ng-model is a powerful feature that allows for

I am attempting to dynamically generate the ng-model directive within an ng-repeat, but I am encountering a browser error. Our goal is to dynamically retrieve attributes of a certain type and set them in the DOM.

The specific error I am receiving is:

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

You can view the error details here

<div class="form-group" ng-repeat="attribute in objectType.objectAttributes | orderBy : attribute.order">
     <div class="col-sm-10" ng-if="attribute.multivalued==false">
          <input type="{{attribute.type}}" class="form-control"
              ng-model="{{'attribute.'+attribute.label}}">
     </div>
</div>

Does anyone have any suggestions on how to resolve this issue? Thank you!

javascriptangularjsangularjs-ng-repeatdynamically-generatedangularjs-ng-model

Answer №1

After encountering some errors due to incorrect form, I persevered and eventually managed to obtain the complete list of attributes. By changing the input, I was able to alter attribute.value for each attribute. It was a tricky process but it paid off in the end!

<div ng-repeat="attribute in indoor.values | orderBy : attributes[$index].order">
     <input type="{{attributes[$index].type}}" class="form-control"
          ng-model="attribute.value">
</div>

Answer №2

Here is one method to achieve it:

ng-model="item.{{item.label}}"

Answer №3

Avoid using double curly braces {{}} in ng-model; instead use square brackets [] for dynamic ng-model assignments. In your specific scenario, it should be implemented as follows:

<div class="form-group" ng-repeat="attribute in objectType.objectAttributes | orderBy : attribute.order">
 <div class="col-sm-10" ng-if="attribute.multivalued==false">
      <input type="{{attribute.type}}" class="form-control"
          ng-model="value1[attribute.label]">
 </div>

Make sure that the "value1" object in ng-model corresponds to your input value. Remember to declare $scope.value = [] in your controller. This solution should provide assistance in resolving your issue.

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

Steps for ensuring a promise is fulfilled in Node.js and Firebase

I've been struggling with this issue for quite some time now and can't seem to figure it out. g_globalList.once("value").then(function(tickList){ var multiPaths = []; tickList.forEach(function(ticker){ ticker.val().forEach(fu ...

javascriptnode.jsfirebasefirebase-realtime-database

What is the best way to begin at a specific index in an array without skipping any elements?

As I continue my journey of learning JS, I have encountered a task that has left me quite perplexed. The objective is to provide an index to start from and also include the items missing in the array while displaying them in an angular format. Here is what ...

javascriptarraysangular

Using a JSON string with form field names and corresponding values to automatically fill in form fields using jQuery

My JSON string looks like this: [{"meta_key":"algemeen_reden","meta_value":"oplevering"},{"meta_key":"algemeen_netspanning","meta_value":"230"}] Currently, I am using the following script to fill out form fields: // Grab Algemeen Data get_algemeen_data ...

javascriptjqueryjsonajax

Using React and Material-UI: Implementing button functionality to call another class using hooks in the main App component

Just starting out with React/MUI and currently working on different components for a website, so the UI is not a priority at the moment. Encountering an issue when trying to create a button that links to the Sign Up page (similarly for Sign In): Error: ...

javascriptreactjsmaterial-ui

utilize Angular's interface-calling capabilities

In the backend, I have an interface structured like this: export interface DailyGoal extends Base { date: Date; percentage: number; } Now, I am attempting to reference that in my component.ts file import { DailyGoal } from '../../interfaces' ...

javascriptangulartypescript

Tips for formatting a lengthy SQL query in a Node.js application

Currently, I am facing a challenge with a massive MySQL select query in my node.js application. This query spans over 100 lines and utilizes backticks ` for its fields, making me uncertain if ES6's multi-line string feature can be used. Are there any ...

javascriptmysqlnode.jsecmascript-6

Exploring the concept of passing 'this' as a parameter in JavaScript

<button type="button" aria-haspopup="dialog" aria-controls="b" onclick="openLayer($('#b'))"> button</button> <div role="dialog" id="b"><"button type="button">close<"/button></div> function openLayer(target){ ...

javascriptjqueryparameters

What could be causing Django REST Framework to block non-GET requests with a 403 Forbidden error from all devices except for mine?

Currently in the process of developing a web app using a Django REST Framework API. It runs smoothly on the computer where it was created (hosted online, not locally), but when trying to access the website from another computer, all GET requests work fine ...

javascriptpythondjangoreactjsdjango-rest-framework

Calculate the variance between two variables

I am facing a challenge where I have an object and the 'Hours' field is saved as a string. I am looking to convert this string into actual hours and then calculate the difference between the two variables. const groupSchedule=[ {"days":"sat" ...

javascriptnode.jstypescript

Once an ajax request is made, scripts cease to function correctly

There is a dynamic table on a webpage that I update using ajax. The table contains checkboxes and there are scripts that utilize the checkboxes for certain functionalities, such as toggling the check/uncheck status of all checkboxes when a "Check all / Unc ...

javascriptjqueryrubyajaxsinatra

I need help converting the "this week" button to a dropdown menu. Can someone assist me in troubleshooting what I am missing?

Seeking assistance with customizing the "this week" button on the free admin dashboard template provided by Bootstrap 4. Looking to turn it into a dropdown feature but unable to achieve success after two days of research and watching tutorials. See code sn ...

javascriptjquerycssbootstrap-4

How can audio be efficiently streamed to the browser in small chunks using JavaScript?

I am currently working on setting up an internet radio station where I want to easily switch songs and overlay sounds. My goal is to limit the audio rate so that the feed can be adjusted before being sent out. Additionally, I would like to provide continuo ...

javascriptnode.jsstreamingaudio-streamingweb-audio-api

Employing JavaScript to display or conceal a <div> element while scrolling

I'm looking to create a customized sticky navigation bar through Javascript, but I have never written my own code in this language before. My approach involves implementing two sticky navigation bars that appear and disappear based on scrolling behav ...

javascriptcss

AngularJS: Functions may return false due to the asynchronous nature of services

Template Overview: <div data-ng-if="budgetSummaryExists()"> <span>You currently have no budget.</span> <button type="button" class="btn btn-danger" data-ng-click="setRoute('budgets')">Creat ...

javascriptangularjsangularjs-scopeangularjs-service

The hover effect is not functioning upon loading

Demo: http://jsbin.com/afixay/3/edit 1) Hover over the red box. 2) Without moving the cursor, press ctrl+r to reload the page. 3) No alert will appear. However, an alert will pop up once you move the cursor away and hover back over the box. The issue h ...

javascriptjqueryhtmleventshover

Updating model values while dragging with Angular Dragular

Currently, I am experimenting with dragula and its newer version, dragular, on some sample projects. One specific dilemma I am facing involves the implementation of drag and drop functionality in an Angular project. My query pertains to utilizing a list o ...

javascriptangularjsdragula

One controller displays ng-repeats while the other does not

I have 2 controllers loading in different locations within my view. One controller works perfectly, but the other one does not show ng-repeats or appear in ng-inspector. I have confirmed that the http data is visible in the inspector. Both controllers are ...

javascriptangularjswordpress

"Implementing a nested drawer and appbar design using Material UI, along with incorporating tabs within

I am currently working on an app that includes tabs for different files, each of which requires its own drawer and appbar. I found a codesandbox example that is similar to what I am trying to implement. Here is the link to the codesandbox One issue I hav ...

javascriptreactjsmaterial-ui

"Utilizing AJAX to fetch and showcase API key along with its corresponding values within an HTML

Seeking assistance with a task. I am currently working on displaying API JSON key and value data in a formatted CSS layout on an HTML webpage. My approach involves making an AJAX call to a Node.js server to retrieve the data. While I have successfully ret ...

javascriptjqueryajaxjsonapi

Discovering a method to detect clicks outside of a React functional component

Looking to identify when a click occurs outside of a React functional component. After stumbling upon an article, I followed the provided code but unfortunately, it didn't work as expected. Despite identifying the issue, I am still searching for a so ...

javascriptreactjstypescriptdom