Having issues with ng-model functionality in AngularJS

Struggling to retrieve values from data binding while generating HTML from an API.

<div class="content-fluid ng-scope" id="angular_template">
        <div class="row">
            <div class="col-md-6">
                <label class="col-md-12">First Name</label>
                <input type="text" ng-model="frm1.first_name" class="textboxStyle col-md-6 form-control" placeholder="first name">
            </div>
            <div class="col-md-6">
                <label class="col-md-12">Last Name</label>
                <input type="text" ng-model="frm1.last_name" class="textboxStyle col-md-6 form-control" placeholder="last name">
            </div>
        </div>
    </div>
<input type="button" ng-click="save(frm1)" value="Submit" />

Controller:

mod.controller('CreateSimpleFormController', function($scope, $http) {
    $http.get('<url>').success(function(response) {
    var angularTemplate = response;// html string
            document.getElementById("angular_template").innerHTML = angularTemplate;
    }).error(function(error) {
        console.log('error', error);
    }).finally(function() {}); 

    $scope.save = function(data){
        console.log(data);
        console.log($scope.frm1.first_name);
    }
});

Encountering 'undefined' when clicking the submit button. Seeking assistance in identifying my mistake.

Answer №1

Make sure to define $scope.frm1 in your controller, as this variable needs to be explicitly defined for Angular to bind it with any text in your HTML output. Otherwise, Angular will evaluate the template and make it blank if the variable is not found, ignoring any current text values.

Answer №2

In order to utilize a dot(.) value, it must be defined prior to its usage.

mod.controller('CreateSimpleFormController', function($scope, $http) {
  $scope.frm1 ={};
  ...
}

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

"Utilizing Angular's ng-repeat to house multiple select dropdown

I'm dealing with a scenario like this: <span ng-repeat="personNum in unit.PricePerson"> {{personNum}} <select ng-model="personNum" ng-options="o as o for o in unit.PricePerson track by $index"></select> & ...

Traverse through a list utilizing a jQuery carousel animation

I am attempting to create a looped list with a carousel effect. It seems like the script should first determine the total number of items in the list in order to perform calculations. Then, it can execute an action such as this: Adding an item on one sid ...

Incrementing and decrementing a variable within the scope in AngularJS

Objective: When the next/previous button is clicked, the label on the current slide should change to display the next/previous category. View the Category Slider Wireframe for reference. Context: I previously tried a solution called 'Obtain Next/Prev ...

What's the best way to decrypt a string in NodeJS?

In the midst of my NodeJS & MongoDB project, I've encountered a requirement to encrypt the content of articles before they are published. The catch is that the encrypted content should only be displayed if the correct key-codes are entered. For ...

Is there a single code that can transform all standard forms into AJAX forms effortlessly?

When manipulating my 'login' form, I love using this code to submit it to the specified url and display the response in the designated id. The method of submission is defined as well. It's a great solution, but is there a way to streamline ...

Is there a way to retrieve the left offset of a floating element even when it is positioned outside the viewport?

My current situation involves creating several panels that are stacked side by side within a main container. Each panel takes up 100% of the viewport width and height. I want to be able to horizontally scroll to each panel when clicking on their respective ...

The JQuery parseFloat() function seems to be consistently returning "NAN" whenever it is used with the .text property

I am currently encountering an issue with parsing the text property of an input element identified by the id currency-converter. My goal is to convert this text into a floating-point value so that I can proceed with applying mathematical operations to conv ...

Rejuvenate with Restangular

Need help with Fullcontact service: angular.module('app1App') .service('Fullcontactservice', function Fullcontactservice(Restangular, $http, $q) { // Singleton instantiation in AngularJS var self = this; self.apiKey = ". ...

React Native can trigger a press event, as long as it is not within

My situation involves triggering an action when clicking on the parent component (TouchableOpacity, for example), but not triggering anything when clicking on the children components (Screen and others). It's similar to preventing bubbling on the web. ...

What is the process for creating a register command using discord.js and MongoDB Atlas?

How can I save my Discord member data using a register command? Please provide assistance! bot.js client.on("message", msg => { if (msg.content === "!register, ign:<input from member>, level:<input from member>"){ ...

Choosing a root element in a hierarchy without affecting the chosen style of a child

I am working on a MUI TreeView component that includes Categories as parents and Articles as children. Whenever I select a child item, it gets styled with a "selected" status. However, when I click on a parent item, the previously selected child loses its ...

Stopping npm private organization from releasing public packages

Is there a method to restrict the publication of public packages within an npm organization? It appears that this scenario would often arise (ensuring that no member of an organization accidentally publishes a package as public when it should be private b ...

What is the best method in Django to dynamically load JavaScript based on the view name, if it exists?

In the realm of Django, I find myself faced with the challenge of loading a JavaScript file that matches the name of the view whenever I call said view with a template. For example, if I invoke the view foo, my goal is to automatically load foo.js from a ...

Apply a different class to a group of elements when hovering over them, excluding the element being hovered on

I need to blur multiple elements on my website when I hover over them, leaving only the hovered element in focus. Is there a more efficient way to achieve this? Currently, I have the following code: $(function() { $('#a').hover(function() { ...

No acknowledgment from command

Why doesn't the bot respond when I run this command? There are no errors. Do I have the role that matches in r.id? client.on('message', async message => { // Check if the user has a role with an id if(message.author.bot) return; ...

Adjust camera view according to the rotation in three.js

I am in the process of creating a demonstration, and I'm facing an issue with moving the camera in my scene in the direction it is pointing. The concept is similar to pointer lock controls, but I need the camera to have the ability to move up, down, f ...

Tips for using a JavaScript function to navigate to a specific division (<div>) on an HTML page

I am facing an issue where I need to redirect within the same HTML page that includes a add-form div. What I want is that when I click on a button, my redirection should be to a specific div containing some code. Currently, I have code that redirects to a ...

Double the excitement with jQuery UI's bouncing images

Hi everyone, this is my first time posting here so I apologize in advance if there are any issues with my markup. I'm still getting used to the SOF framework for writing posts. Currently, I am working on trying to make social icons bounce on hover on ...

Need help with creating a new instance in AngularJS? Unfortunately, the save method in CRUD is not getting the job done

Whenever I attempt to create a new task, nothing seems to happen and no request is being sent. What could be causing this issue? How can I go about troubleshooting it? Take a look at how it appears here Check out the $scope.add function below: var app ...

What is the way to restrict the length of input in a v-select component?

I am currently using the Vue-select feature in my project and I have encountered an issue with setting a maximum input length of 45 characters within a v-select element. Despite attempting to handle this limitation on the back-end, I am unable to prevent u ...