I create add-to-cart app.
Want to click each item and add it to cart.
But firstly I need to click button 'add to cart' and increase its value with every click.
As I added ng-repeat, I don't know how to write a function that will be responsible for adding separate item.
angular.module('TransactionApp', [])
.controller('TransactionsCtrl', function($scope) {
$scope.title = 'Online-store';
$scope.itemsArray = [
{ price: 50, name: "Whey protein", img: 'img/item-1.png', quantity: 0},
{ price: 60, name: "Protein bar", img: 'img/item-2.png', quantity: 0 },
{ price: 35, name: "BCAA", img: 'img/item-3.png', quantity: 0 },
{ price: 50, name: "Whey protein", img: 'img/item-1.png', quantity: 0 },
{ price: 60, name: "Protein bar", img: 'img/item-2.png', quantity: 0 },
{ price: 80, name: "BCAA", img: 'img/item-3.png', quantity: 0 }
];
// $scope.count = 0;
$scope.addTo = function(){
}
});
here is html:
<h2 class="title">{{title}} <i class="em em-shopping_bags"></i></h2>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-2 col-sm-6">
<div class="card" style="width: 18rem;" ng-repeat='item in itemsArray'>
<img class="card-img-top" ng-src={{item.img}} alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">{{item.name}}</p>
<p class="price">{{ item.price | currency }}</p>
<i class="em em-shopping_trolley"></i> Add to cart <span class="number">{{ item.quantity }}</span>
</p>
</div>
</div>
</div>
</div>
</div>
Pass the item to controller with addTo(item):
<a href="#" class="btn btn-warning" ng-click="addTo(item)">
<i class="em em-shopping_trolley"></i>
Add to cart
<span class="number">{{ item.quantity }}</span>
</a>
after your addTo accepts a parameter:
$scope.addTo = function(item){ // 'item' is a reference to an element in itemsArray
item.quantity++;
}
I believe each of your item in view has its own Add to Cart Button against it and I also believe you want to increase the quantity property of each of the item each time a user clicks the button against that item.
For that all you have to do is pass the item to addTo() method like :-
<i class="em em-shopping_trolley"></i> Add to cart <span class="number">{{ item.quantity }}</span>
and modify the method definition in controller
$scope.addTo = function(var item){
item.quantity++;
}
Related
I have 2 objects with data and I need to restruct the rendering in html.
This is what I get:
but this is what I need to obtain:
Black box is the *ngFor of articles object, respectively red one is *ngFor of adsContainer object
<div *ngFor="let article of articles; let i = index;">
<mat-card class="card">
<div>
<a class="title">
{{article.title}}
</a>
<a>
<p>{{article.content}}</p>
</a>
</div>
</mat-card>
<div class="container" *ngIf="(i % 7) === 6">
<div *ngFor="let data of adsContainer">
<div>
<h1>{{data.value}}</h1>
</div>
</div>
</div>
</div>
public adsContainer: any = [
{ id: '1', value: 'text value here' },
{ id: '2', value: 'text value here' },
{ id: '3', value: 'text value here' }
]
public articles: any = [
{ id: '1', title: 'title value here', content: 'content here' },
{ id: '2', title: 'title value here', content: 'content here' },
{ id: '3', title: 'title value here', content: 'content here' },
........
{ id: '20', title: 'title value here', content: 'content here' },
]
Your issue is that you add your ads containers in a loop
<div class="container" *ngIf="(i % 7) === 6">
<!-- this loop here -->
<div *ngFor="let data of adsContainer">
<div>
<h1>{{data.value}}</h1>
</div>
</div>
</div>
what you want is to add only one ad container at a time, in order to do that, you have to rmove the loop
In order to have the three ads show, you'll have to do some math to get the ad index from the article index
something like this :
<div class="container" *ngIf="(i % 7) === 6">
<div>
<h1>{{adsContainer[mathFloor(i / 7)].value}}</h1>
</div>
</div>
note that Math is not available in angular templates, you'll have to redefine floor as a component method
function mathFloor(val) {return Math.floor(val)}
Try to use directly the array , also when you call
adsContainer[(parseInt(i / 6)-1)% adsContainer.length, it will always restart the index:
<div *ngFor="let article of articles; let i = index;">
<mat-card class="card">
<div>
<a class="title">
{{article.title}}
</a>
<a>
<p>{{article.content}}</p>
</a>
</div>
</mat-card>
<div class="container" *ngIf="(i % 7) === 6">
<div>
<div>
<h1>{{adsContainer[(parseInt(i / 6)-1)%adsContainer.length].value}}</h1>
</div>
</div>
</div>
</div>
I am currently finishing an online full-stack course that requires me to make an e-commerce store as my final project. A part of the project's instructions is to add an "add to cart" function where I must use Vue.js.
I currently have an array of objects like such:
const shop =[
{
id : 1,
name: "Spotify Plaque",
price: 150,
quantity: 0
},
{
id : 2,
name: "Keychain",
price: 35,
quantity: 0
},
{
id : 3,
name: "Cards",
price: 30,
quantity: 0
},
{
id : 4,
name: "Spotify Keychain",
price: 35,
quantity: 0
},
{
id : 5,
name: "Mugs",
price: 70,
quantity: 0
},
{
id : 6,
name: "Glass Cups",
price: 70,
quantity: 0
},
{
id : 7,
name: "Round Christmas Baubles",
price: 45,
quantity: 0
},
{
id : 8,
name: "Flat Christmas Baubles",
price: 30,
quantity: 0
}
]
And I have a product display like such (using bootstrap):
<div class="row">
<div class="col-md-6 col-lg-4 d-flex justify-content-center">
<div class="card" style="width: 18rem;">
<img src="./assets/images/spotifykeychain.jpg" class="card-img-top rounded" alt="...">
<div class="card-body">
<h5 class="card-title">Product Name Go Here</h5>
<p class="card-text">Product Price Go Here</p>
<i class="bi bi-cart-plus"></i> Add to Cart
</div>
</div>
</div>
</div>
My question is, is there any way that I can display the information in the objects in my array, but specifically choose which object and what information in that object I want to display, all using Vue.js?
Yes basically Vue.js does that very perfectly. you can iterate through the array and choose what do display, whats powerful is you can incorporate even the if-statement
Below is just an example using your array and html codes
<div class="row">
<div class="col-md-6 col-lg-4 d-flex justify-content-center" v-for ="prod in shop" :key = "prod.id">
<div class="card" style="width: 18rem;">
<img src="./assets/images/spotifykeychain.jpg" class="card-img-top rounded" alt="...">
<div class="card-body">
<h5 class="card-title">{{prod.name}}</h5>
<p class="card-text">usd {{prod.price}}</p>
<i class="bi bi-cart-plus"></i> Add to Cart {{prod.quantity}}
</div>
</div>
</div>
</div>
I want to add a class to a div based on the id of a field in a object. So far my code is not working for some reason?
<ng-container *ngFor="let item of cards">
<div class="card event-card mb-3">
<div
class="card-body"
[ngClass]="{
'card-main': id === '1',
'card-main2': id === '2'
}"
>
<p class="card-title">{{ item.title }}</p>
{{ item.date }}, {{ item.time }}
{{ item.id }}
</div>
</div>
</ng-container>
public cards = [
{
title: "Example title",
date: "Jan 25, 2025",
time: "11:22am",
typeEvent: "Concert",
id: "1"
},
{
title: "Example title",
date: "Feb 27, 2029",
time: "14:22pm",
typeEvent: "Show",
id: "2"
}
];
You have to use item.id instead of just id for the comparison.
I want to order this list of exercises by count, this works on first load, but when you start to click the increase or decrease, it increases/decreases the count of other indexes
HTML:
<div class="row" ng-repeat="exercise in exercises | orderBy:'count' ">
<div class="exercise-icon col-xs-2"> <img ng-src="{{ exercise.icon }}" /></div>
<div class="col-xs-6">
<p class="exercise-name"> {{ exercise.name }} </p>
</div>
<div class="col-xs-4 counters">
<span class="decrease" ng-click="decrease($index)">-</span>
<span class="count">{{ exercise.count }} </span>
<span class="increase" ng-click="increase($index)">+</span>
</div>
</div>
JS - Controller
app.controller('MainController', ['$scope', function($scope) {
$scope.exercises = [
{
icon: 'img/pushup.jpg',
name: 'Pushups',
count: 20
},
{
icon: 'img/squat.jpg',
name: 'Squats',
count: 15
},
{
icon: 'img/pullup.jpg',
name: 'Pullups',
count: 10
},
...
$scope.increase = function(index) {
$scope.exercises[index].count += 1;
};
$scope.decrease = function(index) {
if ( ($scope.exercises[index].count) > 0){
$scope.exercises[index].count -= 1;
}
};
Instead using $index pass object itself
Like this
<span class="decrease" ng-click="decrease(exercise)">-</span>
JS
$scope.decrease=function(exercise){
exercise.count--;
}
I am building a web application using angular and I want to display a grid of items sorted by category. Each row will correspond to a certain category. This is what my code looks like:
<ion-item ng-repeat="item in items|filter:query|orderBy:'name' ">
<div class="row" ng-scrollable style="width:400px;height:300px;">
<div class="col">
<img ng-src={{item.img}}/>
<p>{{item.name}}</p>
<p>Old Price: {{item.newPrice}}</p>
<p>New Price: {{item.newPrice}}</p>
<button class ="button" ng-click="addToGrocery()">Add to List</button>
</div>
</div>
My controller.js file looks like this:
.controller('CouponsCtrl', function($scope) {
$scope.items = [{ name: 'Banana', newPrice: 3.29, oldPrice: 4.49, aisle: 'A', img: 'http://placehold.it/280x150', category: 'Fruits' },
{ name: 'Chocolate', newPrice: 3.19, oldPrice: 5.39, aisle: 'B', img: 'http://placehold.it/280x150' , category: 'Dairy'},
{ name: 'Brocolli', newPrice: 2.29, oldPrice: 4.40, aisle: 'D', img: 'http://placehold.it/280x150' , category: 'Vegetables'}
];
})
I believe I need nested ng-repeats but I am not sure how to incorporate that.
Base on groupby Group item detail using AngularJs ng-repeat
<body ng-controller="con">
<div ng-repeat="(setKey, set) in items|filter:query|orderBy:'name'|groupBy:'category'">
{{setKey}}
<div ng-repeat="item in set">
<div class="row" ng-scrollable="" style="width:400px;height:300px;">
<div class="col">
<img ng-src="{{item.img}}/" />
<p>{{item.name}}</p>
<p>Old Price: {{item.newPrice}}</p>
<p>New Price: {{item.newPrice}}</p>
<button class="button" ng-click="addToGrocery()">Add to List</button>
</div>
</div>
</div>
</div>
</body>
http://plnkr.co/edit/GMW52iJyRlQ2otZndGLM?p=preview