Looking to include a new item into an array with the help of AngularJS

Having just started with angularJS, I am facing difficulties in adding an object from a form to an array. When I click on "Add New Product", it triggers the "newItemModal". I enter the new product information but the submit button doesn't seem to work. I want the new product to be added to my items array when I click on submit.

Furthermore, after filling out the new product details under the "newItemModal" modal and then closing the form to open the "editItemModal" using the button under the "Item Number" column, the form displays the same information that was entered in the "Add New Product" form.

HTML CODE

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bodega Ilusion</title>

    <!-- Bootstrap Core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="../vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<div id="wrapper">

...

AngularJS CODE

(function(){
var app = angular.module("inventory", []);

app.controller("InventoryController", function($scope){

    $scope.product = {};

    $scope.addProduct = function(product){
        console.log("it worked")
        $scope.product.createdOn = Date.now();
        product.push($scope.product);

    $scope.product = {};
    };

    $scope.items = [
        {
        code:"FD1",
        description: "Happy valentines",
        in: 50,
        out: 20,
        total: 30,
        createdOn: 1397490980837
        },
        {
        code:"FD2",
        description: "Happy Mothers Day",
        in: 70,
        out: 20,
        total: 50,
        createdOn: 1397490980837            
        },
        {
        code:"FD3",
        description: "I Love You",
        in: 100,
        out: 30,
        total: 70,
        createdOn: 1397490980837
        },
        ...

    ];
});


})();

Answer №1

When adding a new product object to the product array, remember to actually push it into your $scope.items array.

Consider this alternative approach:

    $scope.addProduct = function(product){
        console.log("Success!")
        $scope.product.createdOn = Date.now();
        $scope.items.push($scope.product);

    $scope.product = {};
    };

Answer №2

Implement the following modifications and give it a try:

<form name="myForm" novalidate ng-submit="inventoryCtrl.addProduct(item)">

update to

<form name="myForm" novalidate ng-submit="inventoryCtrl.addProduct(inventoryCtrl.item)">

within your controller,

following the line $scope.product = {}; include $scope.item= {};

alter the function addProduct to

$scope.addProduct = function(product){
   console.log("it worked")
   product.createdOn = Date.now();
   $scope.items.push(product);
};

It seems like there is no longer a necessity for $scope.product in the controller.

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

I encounter issues when trying to run "yarn start" following the integration of tailwindcss into my React project

I'm encountering an issue while integrating tailwindcss with postcss into my React Application (built using create-react-app). To address this, I modified the scripts section in my package.json. Here is how my updated package.json appears: { "name ...

I am unsure about how to properly implement the reduce function

I am struggling with implementing the reduce function in my code. I have data output from a map function that consists of two documents. For example, one document contains: key "_id":"AD" "values" { "numtweets" : 1, "hastags" : ...

I must update a bootstrap class name within multiple layers of divs by referring to the parent class

My code structure is set up like this: <div id="main-parent"> <div class="child2"> <div> child2 </div> </div> <div>child3</div> - - - - <div class="ch ...

Interactive planetary visualization using three.js in real-time

As I work on my react project, I'm developing a globe and looking to initialize it accurately with respect to a specific time, whether it be the current time or a future time. The goal is for this globe to correctly align itself with the day and night ...

Tips for Configuring a Nestjs Query Using TypeORM to Retrieve Several Entries

When I send this specific URL from my Angular application: http://localhost:3000/api/skills?category_id=2 The main issue revolves around how to modify the code in order to successfully retrieve all skills with a category_id of 2. It is important to note ...

Identify which anchor tag from the group with the matching class was selected and retrieve its unique identifier

There are multiple anchor tags with the same class in my code. <a href='' id='id1' class='abc'>Link 1</a> <a href='' id='id2' class='abc'>Link 2</a> <a href='&apos ...

Execute a Node.JS query using an HTML select dropdown

My goal is to customize queries to a mySQL database based on the user's selection from select options on my website. Here is the HTML code: <select id = "year"> <option value = "yr" selected>Choose a Year</option> <option id = " ...

The functionality of Office Web Viewer is compromised when used in a cordova application

I am currently in the process of developing a mobile app using Cordova, Ionic, and AngularJS. I am looking to incorporate Microsoft's online office viewer into my app to allow users to view Word and Excel documents directly within the app itself. The ...

Seeking the perfect message to display upon clicking an object with Protractor

Currently, I am using Protractor 5.1.1 along with Chromedriver 2.27. My goal is to make the script wait until the message "Scheduling complete" appears after clicking on the schedule button. Despite trying various codes (including the commented out code), ...

What is the best method for transferring properties to the parent component using Vue router?

I have a multi-step form that each step has a different header structure. The only variation in the header among the steps is the wording, which changes as you progress through the steps. I am looking for a way to achieve this using Vue Router: pa ...

AngularJS: implement functionality to trigger action when div is visible

I am currently working on developing a website using AngularJS and I have come across an interesting problem. I am able to show or hide a div element successfully through Angular, but now I need to make dynamic substitutions within this div. However, I wan ...

An Exploration into the Error Situations of NPM Request Library

I'm encountering an issue with the callback in my request function. I'm trying to figure out the specific circumstances under which an error is passed to this callback. const req = require('request'); req('http://www.google.com&ap ...

Loading Kendo JS on the client side proves to be rather time-consuming

Working on my project, I have encountered a problem with the kendo ui scheduler where the downloading of the kendo js and css files on the client side is causing slowness on our website. To address this issue, we are attempting to download the kendo js and ...

Is there a way to customize CKEditor to prevent it from continuously adding <p></p> tags within the textarea automatically?

As I was going through the CKEditor tutorial, I implemented the following: $( '#editor' ).ckeditor(function(){}); //it's working great!! However, after submitting the form, I noticed that by default, the textarea displays <p></p ...

What are some ways to optimize Ajax requests for improved speed when multiple identical requests are made on a single webpage?

When the webpage is loaded, a block is dynamically created using an Ajax call to retrieve data from another page. This structure is then populated and added to a specific DOM element. However, multiple Ajax calls during page loads are causing delays. Is ...

Instructions for adjusting the size of my modal window when the keyboard appears?

While developing a next.js app, I encountered an issue with the chat modal. When the input field is in focus, I want to resize the modal height so that the keyboard popup does not hide the input field. I attempted to modify the DOM but could not get it to ...

Angular filter is designed to search for elements that contain a specific value, rather than only those that are an exact match

I am currently trying to relate rules to fields using the 'filter' filter in Angular. You can see an example of this implementation here: http://plnkr.co/edit/dQiv5lRzhQNjXZ6pVdWO?p=preview The code I am using for this purpose is as follows: &l ...

What is the reason behind utilizing the external 'this' within the inner function in Vue: $this=this?

Recently, I came across some code online that included a line $this=this. My initial interpretation was that this line assigns the 'this' of the outer function to a variable, allowing it to be used in the inner function as well. However, upon fur ...

Add the useState hook from React to an array

Hey there, I need some help with my code. I am trying to add an element to my array, but it's not working as expected. Can you take a look at what I have written below? const [datesState, setDisabledData] = useState([ format(new Date(2021, 4, 1) ...

Compilation failure resulting from core UI build in React js

I have recently transitioned my domain to React Js and am in the process of learning. I have been working on creating an admin panel using Core UI Reactjs components, however I keep encountering an error that says "This error occurred during the build ti ...