Updating the view with respect to number of clicks in angularjs - angularjs

Question

I want to update my view(an input form) to add products to database. For a single product I am able to add it by making it into an array, but now I want to add multiple products and with the click of a button "Add more Product", a similar view(form) is to be generated below the existing form, and this can go on multiple times(to be determined at run time). Now I have two problems:
1. How to update my view with every (Add more Product)button click. Is it done by maintaining some count?
2. How to add multiple product values from each of the forms into the the array of object.
$scope.onClick = function () {
$scope.productData =
{
name: $scope.name,
description: $scope.description,
price: $scope.price,
image: $scope.image,
tags: $scope.tags,
partner_id: $scope.partner_id,
};
}

Answer 1

Example Code
There are a ton of ways to do this. I made this sample plunker that shows a simple option of toggling a form div, adding data in the form, then pushing the resulting form object to the primary products array.
EDIT: I refactored my plunk and snippet to use a Javascript class and constructor. Cloning a master object as shown below is another way to perform this task.
https://embed.plnkr.co/IsNifSaF8jE7oOog29dK/
(See the full snippet at the bottom of this answer.)
Explanation
In your code, you are using $scope on all of your object properties. What you should actually do is create one top-level scope array that is the result of your products retrieval from the server. I would actually create a JavaScript constructor / class that matches the product object you need in the database (for brevity, I just created a "master" object and a cloned "newProduct" object to make edits to):
// Sample Product Object
$scope.newProduct= {
name: "",
description: "",
price: 0.00,
image: "",
tags: [],
partner_id: 0
};
You can bind your $scope.newProduct object to the form with ng-model.
<!-- ==== Simplified Form ==== -->
<form class="form" ng-submit="submitNewProduct()">
<div class="form-group">
<label>Product Name: </label>
<input class="form-control" type="text" ng-model="newProduct.name" >
</div>
<input type="submit" class="btn btn-info" />
</form>
Now when you submit the new product data, you can manipulate it however you need to in the controller (via the $scope.submitNewProduct() function). Once the object is successfully inserted into your database and you're done manipulating the data, you can push the finalized "new product" object into the products array. AngularJs will update the view for you (bound objects via ng-model are being watched for changes) once you add the new product to the array:
// If server update is successful, add new product to products array
$scope.products.push($scope.newProduct);
If you aren't using a constructor, just make sure to note that I reset the $scope.newProduct object back to default values so it doesn't carry over any new changes when you open the new product form again.
// Reset placeholder product
$scope.newProduct = $scope.masterProduct;
Helpful Resources
Tutorial Vids: https://youtu.be/MzqkIZLkBsU
Javascript Constructors: https://www.w3schools.com/js/js_object_constructors.asp
ngRepeat Examples: https://www.w3schools.com/angular/ng_ng-repeat.asp
Snippet
(function() {
"use strict";
var app = angular.module("myApp", []);
app.controller("myController", myController);
myController.$inject = ["$scope", "$timeout", "$filter"];
function myController($scope, $timeout, $filter) {
$scope.loading = false;
class Product {
constructor(_name, _description, _price) {
this.id = this.getNewId();
this.name = _name;
this.description = _description;
this.price = _price;
this.image = "https://www.thesweetexplosion.co.uk/wp-content/uploads/2013/06/product-placeholder.jpg";
this.tags = [];
this.partner_id = 0;
}
getNewId() {
var latestId = $scope.products[$scope.products.length - 1].id
return latestId + 1;
}
}
// Pretending we received these products received from the database...
$scope.products = [{
id: 0,
name: "product_1",
description: "product_1 description",
price: 52.23,
image: "https://raspberrypi.dk/wp-content/uploads/2014/07/raspberry-pi-model-b-plus1.png",
tags: [],
partner_id: 345214967
}, {
id: 1,
name: "product_2",
description: "product_2 description",
price: 46.23,
image: "https://modtronix.com.au/wp-content/uploads/enc-rpi3-official_bottom_ll-100x100.jpg",
tags: [],
partner_id: 514852924
}];
// Add new Products by using this base object
$scope.placeholderProduct = {
id: 0,
name: "",
description: "",
price: 0.00,
image: "https://www.thesweetexplosion.co.uk/wp-content/uploads/2013/06/product-placeholder.jpg",
tags: [],
partner_id: 0
};
$scope.createNewProduct = function(){
$scope.newProduct = new Product("", "", 0);
}
$scope.submitNewProduct = function() {
// DO SERVER UPDATING HERE
// Show loading
$scope.updating = true;
// Simulate server update
$timeout(function() {
// If server update is successful, add new product to products array
$scope.products.push($scope.newProduct);
// Reset submit button
$scope.updating = false;
// Reset placeholder product
$scope.newProduct = {};
// Hide products form
$scope.addProductForm = false;
}, 1000);
}
}
})();
.productImg {
width: 50px;
height: 50px;
}
.prodForm {
margin-top: 15px;
margin-bottom: 15px;
;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron text-center">
<h3>AngularJS (1.3.1) - Instantiating Products with ES6 Class Constructor</h3>
</div>
</div>
</div>
<!-- New Product Form - Toggled with addProductForm -->
<div class="col-xs-12">
<button type="button" class="btn btn-sm btn-success" ng-click="createNewProduct(); addProductForm = !addProductForm" ng-show="!addProductForm">
<span class="glyphicon-plus"> Add New Product</span>
</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="addProductForm = !addProductForm" ng-show="addProductForm">
<span>Clear</span>
</button>
</div>
<div class="col-xs-12 well prodForm" ng-show="addProductForm">
<form class="form" ng-submit="submitNewProduct()">
<div class="form-group">
<label>Product Name: </label>
<input class="form-control" type="text" ng-model="newProduct.name" >
</div>
<div class="form-group">
<label>Description: </label>
<input class="form-control" type="text" ng-model="newProduct.description" />
</div>
<div class="form-group">
<label>Price: </label>
<input class="form-control" type="number" min="0.01" step="0.01" ng-model="newProduct.price" format="currency" />
</div>
<div class="form-group">
<label>Partner Id: </label>
<input class="form-control" type="number" ng-model="newProduct.partner_id" />
</div>
<input type="submit" class="btn btn-info" ng-show="!updating" />
<button type="button" class="btn btn-info" ng-show="updating"><i class="fa fa-spinner fa-spin"></i> Updating...</button>
</form>
</div>
<!-- Primary Products Table -->
<div class="col-xs-12">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Image</th>
<th>Tags</th>
<th>Partner Id</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products track by $index">
<td>{{ product.name }}</td>
<td>{{ product.description }}</td>
<td>{{ product.price | currency }}</td>
<td>
<img class="productImg" ng-src="{{ product.image }}" alt="{{ product.name }} img" />
</td>
<td>{{ product.tags }}</td>
<td>{{ product.partner_id }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>