What could be the reason why the AngularJS form is set to read-only

Explaining the setup of my app in HTML:

<div ng-app="md-app">
    <div id="general">
        <ng-include src="template1" ng-controller="GeneralCtrl"></ng-include>
    </div>
</div>

The JavaScript function to fetch a person from a REST API and assign a template:

function GeneralCtrl($scope, $http, $location) {
    $scope.template1 = 'some_path';

    $scope.person = $http.get('route', {id: personId})).then(function(response){
        return response.data;
    }); 
}

Within the template, all data is displayed. There is also a form for editing some of the person's data, but it is initially set to be read-only:

 <form>
     <div class="form-group">
         <input type="text" class="form-control" ng-model="person.nick"/>
     </div>
 </form>

Although the person's nickname is shown in the input field, I am unable to edit it. Typing seems to have no effect. What could be causing this issue?

Answer №1

When using $http.get in AngularJS, the data is not returned directly to your model because it is asynchronous. Instead, it returns a Promise object that you can handle. To update your $scope.person with the returned data, you need to do so inside the .success() callback:

$scope.person = {};
$http.get('route', {id: personId})).success(function(response){
    $scope.person = response.data;
});

For more information and examples on how to use $http in AngularJS, refer to the documentation.

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

What is causing the most recent iPhones to have issues with my Javascript code?

After analyzing my webserver logs, it appears that an iOS 14 device is categorizing one of my Javascript files as "injected". This file seems to be operating in a separate environment or namespace. As a result, any AJAX attempts made by the script fail bec ...

The AJAX request encountered an unexpected failure that cannot be identified (Using jQuery)

Are you facing issues with a service that returns JSON data? Check out this URL: If you're attempting a simple AJAX request, here's some sample code to get you started: $.ajax({ type: "get", url: "http://api.drag2droid.shamanland.com/ca ...

Having trouble retrieving req.session variables in Express/NodeJS?

I have come across various versions of this particular question, however, none of them seem to address my issue directly. My current objective is to establish a Node.js server using Express. Below is my existing server configuration: var express = require ...

What is the proper way to send an AJAX request with the data type set to

I am currently working on creating my own POST request. Below is the function I have written: function sendPost(o) { var h = new XMLHttpRequest(); h.onreadystatechange = requestComplete; function requestComplete() { if (h.readyState = ...

jQuery blueimp File Uploader: Transferring multiple files to the server on Internet Explorer

After customizing the demo for my Rails application, I encountered an issue with the plugin in Internet Explorer. While it works smoothly on Chrome and Firefox, in IE (all versions) it fails to upload all but one file when multiple files are selected, and ...

Ways to integrate a stateful button from Bootstrap into an Angular application

While it's easy to implement a "Loading" state when clicking on a button using Bootstrap, I couldn't find a simple way to do it in Angular with the Angular Bootstrap UI library. Any suggestions or tips would be greatly appreciated! ...

When ng-app has a value other than an empty string, the angular directives will fail to function as expected

I am just beginning to explore AngularJs and I'm puzzled by a strange behavior in my code. When the value for ng-app is left as an empty string, the Angular directives work fine. However, when the value is not an empty string, the directives do not se ...

A step-by-step guide on how to use the Google Closure Compiler: a

Is there anyone who could assist me in adding a snippet to the basic process of Google Closure Compiler? I have been trying unsuccessfully to do this via JavaScript code. I am using an example snippet from the official npm page, but when I run it, someth ...

Issue encountered while appending new rows to the tbody of a table

I'm encountering an issue with the append function within a for loop in my code. The string being passed to the function isn't parsing correctly and results in an error. How can I go about resolving this problem? Thanks! function getDetailPopUp ...

Tips for creating a hidden tab that only appears when hovered over

When hovering over the link tag .cat-link a.navlink, each subcategory tab .subcategories div is displayed. However, I would like to hide all tabs initially and have them appear only when hovered over with the mouse. Once the mouse is removed, I want the t ...

Malfunction in triggering events within an Ajax Magnific popup feature

I'm trying to load a page within a magnific popup using ajax: $("#operator").magnificPopup({ delegate: 'a.edit', mainClass: 'mfp-fade', closeBtnInside: true, removalDelay: 300, closeOnContentClick: false, t ...

Unusual behavior of the `map` function in Firefox's JavaScript

Here's an interesting observation regarding the behavior of the map function in Firefox. In a particular error scenario on a web application, when Firebug pauses at the error, entering the following code into the Firebug console: ["a", "b", "c", "d" ...

How to eliminate the hash from a particular page in VueJS

My dilemma is quite similar to the one discussed in this Vue router thread on removing hash on certain pages I need to configure the hash mode for all pages except for mysite.com/success. This specific page is accessed via redirect from ...

Refreshing a jsp page without the need to reload the content

On my jsp page, I am displaying the contents of a constantly changing table. This means that users have to refresh the page every time they want to see updated information. Is there a way for me to update the content dynamically without requiring users t ...

Arrange fixed-position elements so that they adhere to the boundaries of their adjacent siblings

Is there a way to keep two fixed elements aligned with their sibling element on window resize? <div class="left-img"> IMAGE HERE </div> <!-- fixed positioned --> <div class="container"> Lorem ipsum... </div> <div class=" ...

Angular Reactive Forms may not properly update other inputs when binding a control to multiple inputs

While working with reactive forms, I encountered an issue where accessing the same control in multiple inputs seemed to result in one-way data binding (input-to-model). If I make edits in one input, it updates the model correctly but does not refresh the o ...

Click on the link to go to another page according to the drop-down option selected

Here's a puzzling query that even Google fails to address. I've got two pages: page-1 and page-2. On page-2, there is a <ul> element and a toggle-button-box with the following code: <ul> <li><button class="button is-checked ...

Exploring the functionalities of AngularJS' ng-options when working with select elements

In my search through other posts, I came across this issue but couldn't find a solution. Here is the array in question: $scope.items = [ {ID: '000001', Title: 'Chicago'}, {ID: '000002', Title: 'New York' ...

Merge the variables extracted from an array of objects

I need to extract specific data from an array of objects and perform a calculation. For example, the provided data is as follows: const item = [{ "act": "Q", "line": 1, &quo ...

The Ajax Form disappears from the page

After racking my brain for a while, I've come to the conclusion that it's time to seek some assistance. I have work tomorrow and I don't want to spend all night on this. The issue lies in my form which is located inside a modal, here is my ...