Button addition in Angular is malfunctioning

Question

Button addition in Angular is malfunctioning

I have a form with add and remove fields implemented using angularjs. It works fine when running outside the div, but when placed inside a div, only the remove function is working. Can you please advise on what might be going wrong?

<body>

<div class="container"> 

        <div class="row">

            <div class="col-md-2 col-sm-2">
                <div class="emp_details"> 
                <h3><span>Anil Kumar K</span></h3>
                <h3><span>IND1469</span></h3>
                <hr></hr>
                <h2><span>Manager</span></h2>
                <h3><span>Vikram Ranade</span></h3>
                </div>
            </div>

    <div class="col-lg-10 col-sm-10">

    <div class="card hovercard">
        <div class="card-background"> 
          
        </div>
      
        <div class="card-info"> <h1><span class="card-title">OBJECTIVES</span></h1>
        </div>
    </div>

    </div>
</div>

...

JavaScript file

var app = angular.module("myapp", []);
  app.controller("ListController", ['$scope', function($scope) {
      $scope.personalDetails = [
          {
              'fname':'Muhammed',
              'lname':'Shanid',
              'email':'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e4fff6f9fef3d7e4ff...     }

          ];

...

CSS file

/* USER PROFILE PAGE */
 .card {

...

javascript css angularjs

Answer 1

Answer №1

If you want to create a new function in your AngularJS application, follow this syntax:

$scope.addNew = function(personalDetails) {
 // Code
}

The above code snippet defines a function named `addNew` that takes an argument called `personalDetails`. When calling the add function in your view, make sure to pass `personalDetails` as an argument.

<form ng-submit="addNew(personalDetails)">

Here is an example of how you can implement this in your AngularJS app:

var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
  $scope.employeeCount = 4;
  $scope.personalDetails = [{
      'fname': 'Muhammed',
      'lname': 'Shanid',
      'email': 'example@example.com'
    },
    {
      'fname': 'John',
      'lname': 'Abraham',
      'email': 'john@example.com'
    },
    {
      'fname': 'Roy',
      'lname': 'Mathew',
      'email': 'roy@example.com'
    }
  ];

  $scope.addNew = function(personalDetails) {
    $scope.personalDetails.push({
      'fname': personalDetails.fname,
      'lname': personalDetails.lname,
      'email': personalDetails.email,
    });
    $scope.PD = {};
  };

  // Other controller functions defined here

}]);

x
/* Your CSS styles go here */

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">

  <!-- Your HTML content goes here -->

</div>

Answer 2

If you want to create a new function in your AngularJS application, follow this syntax:

$scope.addNew = function(personalDetails) {
 // Code
}

The above code snippet defines a function named `addNew` that takes an argument called `personalDetails`. When calling the add function in your view, make sure to pass `personalDetails` as an argument.

<form ng-submit="addNew(personalDetails)">

Here is an example of how you can implement this in your AngularJS app:

var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
  $scope.employeeCount = 4;
  $scope.personalDetails = [{
      'fname': 'Muhammed',
      'lname': 'Shanid',
      'email': 'example@example.com'
    },
    {
      'fname': 'John',
      'lname': 'Abraham',
      'email': 'john@example.com'
    },
    {
      'fname': 'Roy',
      'lname': 'Mathew',
      'email': 'roy@example.com'
    }
  ];

  $scope.addNew = function(personalDetails) {
    $scope.personalDetails.push({
      'fname': personalDetails.fname,
      'lname': personalDetails.lname,
      'email': personalDetails.email,
    });
    $scope.PD = {};
  };

  // Other controller functions defined here

}]);

x
/* Your CSS styles go here */

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">

  <!-- Your HTML content goes here -->

</div>

Answer 3

Answer №2

<form ng-submit="addNew()">

In this code snippet, there is a missing argument being passed. However, in the corresponding controller function

$scope.addNew = function(personalDetails){
              $scope.personalDetails.push({ 
                  'fname': personalDetails.fname,
                  'lname': personalDetails.lname,
                  'email': personalDetails.email,
              });
              $scope.PD = {};
          };

The expected parameter is personalDetails, so make sure to update the html as follows

<form ng-submit="addNew(personalDetails)">

Answer 4

<form ng-submit="addNew()">

In this code snippet, there is a missing argument being passed. However, in the corresponding controller function

$scope.addNew = function(personalDetails){
              $scope.personalDetails.push({ 
                  'fname': personalDetails.fname,
                  'lname': personalDetails.lname,
                  'email': personalDetails.email,
              });
              $scope.PD = {};
          };

The expected parameter is personalDetails, so make sure to update the html as follows

<form ng-submit="addNew(personalDetails)">

Button addition in Angular is malfunctioning

Answer №1

Answer №2

Similar questions

Issues with the Tumblr platform's back-to-top button functionality

Ensuring AngularJS ui-router/app waits for $http data to avoid Flash of Unstyled Content (FOUC)

Do you want your image to appear visually pleasing on all screen sizes?

Avoiding the opening of a select menu

Follow each step to see the final outcome

From AngularJS, switch your dots to commas for a fresh

Containerized chatboxes with improved stability

The rate of increase decreases as the value approaches its maximum assignment

Use JavaScript to sift through an array and exclusively retrieve items that match a specific value

Acquiring exclusive files from Laravel 8 storage directory using JavaScript

retrieve data from jsp page using ajax request

Node.js for Streaming Videos

Exploring the power of Jasmine with multiple spy functionalities

Retrieving the default props of a child component in Vue after it has mounted

Obtaining the most recently inserted ID in Node.js can be achieved by using

The extended interface appears to be lacking the implementation of parent members

How to implement various middlewares in Express.js depending on the current environment using NODE_ENV?

In Javascript, ensuring a stopping condition for a recursive function that is looping through JSON data

Unable to successfully transfer a document

Discovering the difference between a singular array and an array of arrays