Angular, ng-model, and input bugs causing problems

UPDATE: Jonathan's advice did the trick. I experimented with version 1.1.5, but it triggered a "Duplicates in a repeater are not allowed" error due to duplicate empty strings. I'll choose a solution after work; my current browser has limited functionality.

I encountered a problem with using ng-model in an input field. I've prepared a JSFiddle that showcases the issue. When you click "Add" and then attempt to edit one of the input boxes below, typing becomes restricted!

HTML:

<div ng-class="{selected: selectedPart==$index, cell: selectedPart!=$index}" 
     ng-click="selectPart($index)" ng-repeat="part in parts">
        <textarea class="prompt" ng-model='part.wording'></textarea>
        <hr>
        <span class="numbering" ng-repeat="option in part.options">
            {{ $index+1 }}).
            <textarea class="option" ng-model="option"></textarea>
            <br>
        </span>
</div>

JS:

StaticEX.controller('mainController', function($scope) {
    $scope.parts = [];
    $scope.ps = "Problem Statement";
    $scope.selectedPart = null;


    $scope.newPart = function() {
        return {"wording": "Prompt",
                "options": ["", "", "", ""]}
    };

    $scope.addPart = function() {
        $scope.parts.push($scope.newPart());
    };

Could this issue stem from how I'm referencing "option"? Is it a pseudo-variable generated by the "ng-repeat" directive, unrelated to "$scope"? Or am I making a glaring mistake?

Answer №1

If you're facing the challenge of

Prohibited Duplicate Items in a Repeater
with version 1.1.5, fear not - there is a straightforward solution. I encountered the same issue myself when I upgraded to 1.1.5 a few weeks back.

Using "track by $ index" in the <code>ng-repeat
expression is essential.

<span class="numbering" ng-repeat="option in part.options track by $index">
   {{ $index+1 }}).
   <textarea class="option" ng-model="option"></textarea>
   <br>
</span>

You can learn more about this issue by visiting a blog post, checking out the discussion on GitHub, or joining the conversation on the Angular Google Group.

Answer №2

At times, Angular may struggle to bind to non-objects. To resolve this, a simple workaround is to ensure that your options are objects:

$scope.newPart = function() {
    return {"wording": "Prompt",
            "options": [{text:""}, {text:""}, {text:""}, {text:""}]}
};

After that, you can use the following code:

<input class="option" ng-model="option.text">

Although I believe this specific issue was addressed in later versions of Angular, I recommend trying it with the most recent version. If the problem persists, consider submitting an issue on GitHub.

Answer №3

When you modify

<input class="choice" ng-model="choice">

To

<input class="choice" ng-model="section.choices[$index]">

It appears to function properly, but it introduces problems with focus shifting.

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

Troubleshooting: Issue with WCF service not processing POST requests

I encountered an issue when attempting to call a WCF service using AJAX from another project. The error message displayed was: The server encountered an error processing the request. The exception message is 'The incoming message has an unexpected me ...

Manually validate inputs in Angular

I've encountered an issue with the bootstrap datepicker. When I click on the date icon, the date and time automatically populate in the input field. However, the input remains invalid because I haven't directly interacted with it. Has anyone else ...

Best Practices for Handling Pre-State Setting Mutations in Flux Design Pattern

Currently, I am developing a Vue application utilizing Vuex and following the Flux design pattern. I have encountered what seems to be an inefficient practice of duplicating code in small increments. I am hopeful that this is just a misunderstanding on my ...

Exploring ways to access global window variables in React using JavaScript

I've been following the discussion on how to transfer variables from JavaScript to ReactJS. Here is my array of objects in JavaScript: window.dataArr = []; function makeJsObj(descr, currDate, done) { var data = {}; console.log(descr ...

There seems to be a disconnect between the React Redux store

When attempting to connect my store to a React application, I encountered the following error: TypeError: state is undefined store/index.js (Creating Reducer function) import {createStore} from 'redux'; const counterReducer = (state:{counter:0} ...

Identify and emphasize fields that contain identical, non-empty values

I am attempting to compare the values of textboxes and highlight them if they are the same, excluding any textboxes that are empty. Feel free to view an example on this JSFiddle link: http://jsfiddle.net/qjqa1et2/61/ Below is the jQuery code I am current ...

Can the "value" of an HTML form field rendered by Django be altered?

Essentially, I have a form that includes a radio select widget for the field named Queue. The choices available for the Queue are sourced from a model, which is accessed and defined within the views.py file. To display this form on my template, I am using ...

Having trouble selecting an element by name that contains a specific string followed by [..] using jQuery

I have elements with names like kra[0][category], kra[1][category], and so on. However, I am facing difficulties in selecting these elements by name. Here is my jQuery code: $("[name=kra[0][category]]").prop("disabled", true); ...

provide a hyperlink to the icon located in front of the navigation bar

I'm struggling to come up with a suitable title for this issue. What I am trying to achieve is placing a small icon in front of the navbar so that visitors can click on it and be directed to another site. Initially, I attempted to place the icon using ...

Sveltejs template not displaying on M1 MacBook Air after running - stuck on blank screen

Currently, I am in the process of learning Sveltejs and have been utilizing for the tutorial, which has been quite effective. However, I decided to work on developing and testing Sveltejs applications locally on my MacBook Air M1. I downloaded the provid ...

Backend server encountered an issue with processing punycode

[ALERT] 18:13:52 Server Restarting Prompt: C:\Code\MERN_Projects\podify_app\server\src\db\index.ts has been altered (node:22692) [DEP0040] DeprecationWarning: The punycode module is outdated. Consider utilizing a modern a ...

Storing DOM elements in a cache in Angular.JS

Currently I am utilizing the router in Angular.JS (originally using the built-in one, but now employing ui-route) to toggle between control/template pairs. However, I am facing an issue where there is a delay of up to a second every time I switch back and ...

Troubleshooting script error: Dealing with Ineffective Redirects

I am currently using a JavaScript code that allows users to jump to a directory by typing its name. Here is how it functions: If the input field is left empty, the user will be directed to a page called "error.html" which displays the message "This field ...

The behavior of JS Array.push may catch you off guard

There seems to be an issue with the push function in my code. The problem lies in the last line of code shown below. export enum non_searchFieldsNames { language = 'language', categories = 'categories', subtitle = 'subt ...

Using the symbol for pi in a JavaScript program rather than its numerical value, while still performing calculations with the numerical value behind the scenes

I am working on a calculator project where I want the symbol for pi to be displayed instead of the numerical value. Here is the relevant function: function Pi(pi) { document.getElementById('resultArea').innerHTML += pi; eval(document.ge ...

Implementing a div element within an autosuggest feature

i am currently integrating the bsn autosuggest into my project could someone please guide me on how to insert a div in the result so that it appears like this <div style="left: 347px; top: 1024px; width: 400px;" class="autosuggest" id="as_testinput_x ...

Adjust image size as the page is resized

My challenge is to resize images that are typically too large for the current window size, ensuring they fit within 85% of the client window. I tried creating a function utilizing onload and onresize events but encountered issues. function adjustImages(){ ...

Importing data from an external file into an array using AngularJS

Hey there, I'm new here on Stack and hoping someone can lend a hand because I've hit a roadblock! I'm working with an AngularJS script that generates multiple icons using data from a simple array. Each icon is linked to a YouTube video. Th ...

How to upload an image using Java and store it on a server without the use of Html5

Looking to upload an image file on the server using a servlet without utilizing HTML5. While browsing through stackoverflow, most answers I found were based on PHP. I attempted to read the image file at the client-side in JavaScript with FileReader.readAsD ...

Having trouble determining the total amount in my online shopping cart

I am facing an issue with the shopping cart I created, which consists of two components (Productlist and Cart List). When I click on the 'add to cart' button in the Product List, it successfully moves into the service file and then to the Cart Li ...