Leveraging ng-model with expressions in ng-repeat in AngularJS.Would you

Currently, I am tasked with creating a form for a multilanguage content management system using angularJS.

The language list has been defined within the angular scope as follows:

$scope.languages = 
[
 {id:0,'name':'English'},
 {id:1, name:'French'}
  /* ... */
]

When attempting to create the form in my HTML, I encountered an issue:

<div ng-repeat="lang in languages">
    <label for="titlel{{ lang.id }}">{{ lang.name }}</label>
    <input type="text" class="form-control"  ng-model="editquestion['titlel{{ lang.id}}']" id="titlel{{ lang.id }}" />
</div>

Although the labels display correctly, the ng-model binding is not functioning properly. The text fields remain empty despite data being present in editquestion.titleX. Furthermore, any text inputted into one field is replicated across all fields.

Upon inspection, the ng-model attribute appears to be correct.

Screenshots of the issue can be viewed here:

This issue does not arise when manually coding the HTML, as seen below:


 <label for="textl0">English</label>
 <textarea class="form-control" ui-tinymce="tinymceOptions" ng-model="editquestion.textl0"></textarea>

 <label for="textl1">French</label>
 <textarea class="form-control" ui-tinymce="tinymceOptions" ng-model="editquestion.textl1"></textarea>

Answer №1

ng-model requires an expression (which is then assessed in the current scope), it functions differently compared to assigning an ID for a label. Consider modifying your input like this:

<input ... ng-model="editquestion['titlel' + lang.id]" />

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

Retrieve the data attribute from a specific dropdown menu using jQuery

Here is the code snippet I am currently working with: $('.tmp-class').change(function() { $('.tmp-class option:selected').each(function() { console.log($('.tmp-class').data('type')); }) ...

The initialization of Angular forms containing dynamic names is not occurring as expected

I am facing a challenge where I have multiple objects and a form associated with each object that needs to remember its state, particularly if it's dirty. My goal is to create a form with a dynamic name structure like this: <form name="selectedO ...

Transforming JSON data into a visual flowchart using VUE.js

In the project I am currently working on, I am faced with the challenge of importing a JSON file (exported from a flowchart drawing project) and converting its data into an actual flowchart. Unfortunately, I have not been able to find any leads on how to c ...

Create a JavaScript button that increases a progress bar value by 1 and adjusts its width style by 10 units

Here is the code for managing a progress bar using JavaScript: function getProgress() { return document.getElementById("progressbar").getAttribute("aria-valuenow"); } function setProgress(value) { document.getElementById("progressbar").setAttri ...

programming for the final radio button text entry

I am struggling with a form that has 5 radio buttons, including an "other" option where users can manually enter text. The issue I'm facing is that the form only returns the manual entry text and not any of the preset radio values. I need it to work f ...

The dimensions of the pop-up window in Chrome's JavaScript are not displaying correctly

My goal is to launch a new chat room window on our website. The dimensions of the chat room are set to 750px x 590px. Below is the link I am using to trigger the javascript popup. <a href="javascript:void(0)" onclick="window.open('http://gamersuni ...

Instead of using colons, display the separation of hours, minutes, and seconds with underscores

Currently, I am utilizing moment.js to retrieve the present date and time with the intention of formatting it in the specific format below 'MMMM Do YYYY, h:mm:ss a' Unfortunately, the problem arises as the delineation between hours, minutes, and ...

What is the process for storing a file in a MongoDB database?

Currently, I am working on a small project where I need to store a document file in MongoDB database. I have been told that directly storing document files in MongoDB is not possible, but they can be stored in services like Google Drive or Dropbox and th ...

What happens when 'grid' property is undefined in modal?

I encountered an issue with my modal where I wanted to display pre-selected rows, but kept getting a 'cannot read 'grid' of undefined' error. The UI Grids are defined within the modal, and I have declared two Grid APIs with different na ...

Angular code is failing to send a signal to the server following a $http.post request

I've been using angular for about a week now and I've been struggling to solve this issue. I have a service that wraps around $http because multiple controllers make calls to the same URL. On one particular page, there is a lot of server-side bus ...

Is there a live password verification tool available?

Currently, I am conducting some initial research for my school's IT department as a student employee. The students at our institution are required to change their passwords every six months, but many of them struggle with the various password regulati ...

Use Backbone.js to dynamically insert partial views based on specific routes, similar to how ng-view works in AngularJS

After gaining experience with AngularJs, I am now looking to dive into Backbone.js. However, I am struggling to understand how this library handles routes and partial views/templates "injection". In Angular, we can easily set up static components like th ...

How to ensure that the iframe is completely loaded before proceeding with Selenium JavaScript

I have a webpage that displays an iframe, within the iframe there is a spinning spinner (overlying the fields). My approach involves using selenium to navigate to the iframe, return this.driver.wait(function() { return self.webdriver.until.ableToSw ...

A quick guide on automatically checking checkboxes when the user's input in the "wall_amount" field goes over 3

I'm looking to have my program automatically check all checkboxes (specifically "Side 1, Side 2, Side 3 and Side 4") if the input for wall_amount is greater than 3. Is there a way to achieve this? I attempted lines 10-12 in JavaScript without success. ...

Trouble with the JavaScript split function

I am trying to split the data in a specific way. Given a string value like this var str = "[:en]tomato[:ml]തക്കാളി[:]"; I am aiming for the following output: tomato,തക്കാളി. I attempted to achieve this using the code sni ...

Navigate through JSON data to uncover the tree structure path

In my project, I am working on creating a treeview user interface using the JSON provided below. I have included properties such as node-id and parentId to keep track of the current expanded structure. Next, I am considering adding a breadcrumb UI compone ...

Extract information from a URL without the need for a page reload or user interaction

Recently, I developed a form that accepts YouTube links and extracts the ID using parsing/regex. The function is triggered by clicking a button, which then displays the ID of the URL. Is there a way to show the ID without requiring a button click or page ...

Ways to enable smooth scrolling feature in Safari

I attempted to implement smoothscroll using a polyfill by adding the following code to the bottom of my body tag: <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e99a8486869d819a8a9b868585c ...

How can parameters be sent without using the .jshintrc file with the gulp-jshint package?

Currently in the process of transitioning a grunt project to a gulp project. In the existing gruntfile, there is a section for the jshint task that looks like this: jshint: { options: { trailing:true, evil:false, indent:4, ...

Conceal the option to "show more" when there are no additional posts to display

Is there a way to dynamically hide the load button when no more posts are available? I've included my code below: function.php function load_more_posts_ajax(){ $offset = $_POST["offset"]; $ppp = $_POST["ppp"]; header("Content-Type: tex ...