My calculation works well for value with 3 digits and below.
For example, item_amt = 250 + 250 will give output 500.
But, when it comes to 4 digits and above, it will give single digit only.
For example, item_amt = 2500 + 2500 will give output 1.
HTML:
<ion-card *ngFor = "let c of cart" class="item-card">
<ion-row float="right">
<ion-col size="2" offset="5">
<ion-button color="medium" fill="clear" (click)="removeCartItem(c)" class="btn-remove-item">
<ion-icon name="close-circle" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<ion-row><ion-label text-wrap>{{c.name}}</ion-label></ion-row><br/>
<ion-row>ITEM PRICE : <ion-label text-wrap>{{c.item_amount}}</ion-label></ion-row><br/>
<ion-row text-wrap>
QUANTITY :
<ion-item>
<ion-button color="medium" fill="clear" (click)="decreaseCartItem(c)">
<ion-icon name="remove-circle" slot="icon-only"></ion-icon>
</ion-button>
<div class="quantity-input">{{c.quantity}}</div>
<ion-button color="medium" fill="clear" (click)="increaseCartItem(c)">
<ion-icon name="add-circle" slot="icon-only"></ion-icon>
</ion-button>
</ion-item>
</ion-row>
</ion-card>
Below is the Controller:
increaseCartItem(product) {
this.cart.addProduct(product);
}
Below is my cart calculation.
addProduct(product) {
let added = false;
for (let p of this.cart) {
if (p.product_id === product.product_id) {
//console.log('P'+p.item_amount);
//console.log(product.price);
p.item_amount = parseInt(p.item_amount) + parseInt(product.price);
product.quantity += 1;
product.amount += 1;
added = true;
break;
}
}
if (!added) {
product.amount = 1;
this.cart.push(product);
}
this.cartItemCount.next(this.cartItemCount.value + 1);
}
I'm new to Angular JS. Please help me. Thank You.
Related
I didn't understand how to pass data from .ts page to .html page in ionic angular.
Array:
this.s1mstatus = [
{
"code" : "01",
"descr" : "Text1."
},
{
"code" : "02",
"descr" : "Text2."
},
{
"code" : "03",
"descr" : "Text3."
}
]
HTML page
<ion-content fullscreen>
<ion-grid>
<ion-row>
<ion-col>
<ion-item [ngClass]="roundedInput" class="roundedInput">
<ion-input type="text" placeholder="Enter M-Status Code" [(ngModel)]="s1mstatus_get" maxlength="2"></ion-input>
<ion-button type="submit" (click)="mstatussend()">Submit</ion-button>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item class="roundedInput">
<ion-input type="text" placeholder="Enter M-Data Code" [(ngModel)]="s1mdata_get"></ion-input>
<ion-button type="submit" (click)="mstatussend()">Submit</ion-button>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
<ion-list *ngFor="let s1ms of s1filtered">
<ion-card class="card-border">
<ion-card-header>
<ion-card-subtitle>M-STATUS: {{s1ms.code}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<p>ERROR MESSAGE:</p>
<p class="ion-black" [innerHTML]="s1ms.descr"></p>
</ion-card-content>
</ion-card>
</ion-list>
</ion-content>
FUNCTION TO CHECK IF EMPTY AND "DO SOMETHING" IF ISN'T:
mstatussend() {
if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
this.roundedInput = 'invalid';
}
else if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
this.roundedInput = 'invalid';
}
else {
this.roundedInput = 'valid';
var s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);
console.log(s1filtered);
}
};
As You can see by the screenshot the console.log command works but I didn't understand how to print those values on the HTML page, maybe it's something easy but is driving me mad.
When you declare variable in your method, then this variable cannot be seen for HTML template:
var s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);
So you need to create a variable that can be seen for HTML template:
TypeScript:
s1filtered: any; // The variable that can be seen for HTML template
mstatussend() {
if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
this.roundedInput = 'invalid';
}
else if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
this.roundedInput = 'invalid';
}
else {
this.roundedInput = 'valid';
this.s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);
console.log(this.s1filtered);
}
};
HTML:
<ng-container *ngIf="s1filtered && s1filtered.length > 0">
<ion-list *ngFor="let s1ms of s1filtered">
<!-- The other code is omitted for the brevity -->
</ion-list>
<ng-container>
My list.html file this file contains the list of products I am fetching using Woocommerce API.Its all working good but I am not able to bind the variation price with each variation.Because in woocommerce each variation has its own id and price is given in that array.I am so confused how to get the price on its particular variation.
<ion-slide> <!--This slide is for fruits-->
<ion-card *ngFor="let product of products" no-padding>
<ion-item>
<ion-thumbnail item-start>
<img-loader *ngIf="product.images" src="{{product.images[1].src}}"
useImg>
</img-loader>
</ion-thumbnail>
<h4 top text-wrap>{{product.name}}</h4>
<p>Rs.{{product.price*product.quantity}}</p>
<ion-icon icon-only class="dec" name="remove-circle"
(click)="decrement(product)">
</ion-icon>
{{product.quantity}}
<ion-icon icon-only class="inc" name="add-circle"
(click)="increment(product)">
</ion-icon>
</ion-item>
<ion-item *ngFor="let attr of product.attributes">
<ion-select [(ngModel)]="qty" placeholder="QTY">
<ion-option *ngFor="let opt of attr.options" [value]="opt">
{{ opt }}
</ion-option>
</ion-select>
</ion-item>
<button color="light" class="addbtn" ion-button clear >add</button>
</ion-card>
</ion-slide>
this is my list.ts file I am using getAynsc() to get the data.
this.WooCommerce.getAsync('products?
category=34&per_page=10').then((result) => {
console.log(JSON.parse(result.toJSON().body));
this.products = JSON.parse(result.toJSON().body);
console.log(this.products);
this.productsvv.forEach(product => { product.quantity = 1; });
this.products.forEach(product => { product.quantity = 1; });
return JSON.parse(result.toJSON().body);
}, (err) => {
console.log(err)
})
home.ts
items = [];
constructor(public navCtrl: NavController) {
this.initializeItems();}
initializeItems() {
this.items = [
{
'title': 'Fiat',
"models" : [
{"model":"500L","value":1,"specs":"hatchback"},
{"model":"Linea","value":2,"specs":"sedan"}
]
}]
brand.html
<ion-list>
<ion-item>
<ion-label>Models</ion-label>
<ion-select id="secim" [(ngModel)]="values">
<ion-option *ngFor="let m of item.models" value="{{m.value}}">{{m.model}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
<div class="" *ngIf="values==1">
<h1 *ngFor="let m of item.models">{{m.model}}:{{m.specs}}</h1>
</div>
<div class="" *ngIf="values==2" >
<h1 *ngFor="let m of item.models">{{m.model}}:{{m.specs}}</h1>
</div>
It's appear like this
500L:hatchback
Linea:sedan
but I want to do like this
(if select value=1)
500L:hatchback
(if select value=2)
Linea:sedan
How could I do? Thank you
Instead of what you are doing now, why not store the selected model to a variable, of which you can then show model and specs, so for example have a variable selectedModel:
<ion-item>
<ion-label>Models</ion-label>
<ion-select id="secim" [(ngModel)]="selectedModel">
<ion-option *ngFor="let m of item.models" [value]="m">{{m.model}}</ion-option>
</ion-select>
</ion-item>
And then just have one div to show the other properties:
<div *ngIf="selectedModel">{{selectedModel.model}}:{{selectedModel.specs}}</div>
DEMO: http://plnkr.co/edit/1xwhtwB5YjKHDbRzusHP?p=preview
i´m having a problem with using ng-repeat. I´m using Ionic 2 with TypeScript and HTML5. I created an array of Objects where i need to access it´s attributes. It´s saying "cannot read property c.getAttribute of undefined" but when i tried to access these attributes not using ng-repeat (just typing array[0].getAttribute), everything worked fine.
Here is my code:
<ion-list>
<ion-item ng-repeat="c in card">
<ion-card class="styledRow">
<ion-item class="cardHeaderClass">
<font size="4" style="color:#FFFFFF;">{{c.getExpiration}}</font>
<p>Monthly student</p>
</ion-item>
<ion-item class="rangeSlider">
<p style="color:white">Perm</p>
<ion-badge color="blue" item-right>{{c.getPermValue}}/{{c.getTotalValue}}{{c.getDayEuro}}
</ion-badge>
</ion-item>
<ion-item class="rangeSlider">
<ion-range disabled="false" min="0" max="{{c.getTotalValue}}" step="1" [(ngModel)]="c.getPermValue" color="secondary">
<ion-icon range-left name="close" color="danger"></ion-icon>
<ion-icon range-right name="checkmark-circle-outline" color="secondary"></ion-icon>
</ion-range>
</ion-item>
<ion-row class="styledRow">
<ion-col>
<button ion-button icon-left color="#f4f4f4" clear small>
<ion-icon name="calendar"></ion-icon>
<div>Platnosť: {{c.getExpiration}}</div>
</button>
</ion-col>
</ion-row>
<div text-right="" class="styledRow">
<ion-note>Refreshed: 12.3.2017
</ion-note>
</div>
</ion-card>
</ion-item>
</ion-list>
And here is my typescript:
export class HomePage {
card: permCard[];
constructor(public navCtrl: NavController) {
this.card = new Array();
for (let i = 0; i < 2; i++){
this.card.push(new permCard("Name","Name", 33, 40, " "+"days", "12.2.2017"));
}
}
}
export class permCard{
private centerName: string;
private permName: string;
private permValue: number;
private totalValue: number;
private dayEuro: string;
private expiration: string;
constructor(public center_name: string, public perm_name: string, public perm_value: number, public total_value: number,
public day_euro: string, public expiration_date: string){
this.centerName = center_name;
this.permName = perm_name;
this.permValue = perm_value;
this.totalValue = total_value;
this.dayEuro = day_euro;
this.expiration = expiration_date;
}
get getCenterName(): string {
return this.centerName;
}
get getPermValue(): number {
return this.permValue;
}
get getPermName(): string {
return this.permName;
}
get getTotalValue(): number {
return this.totalValue;
}
get getDayEuro(): string {
return this.dayEuro;
}
get getExpiration(): string {
return this.expiration;
}
}
I don´t know, if the problem is in the array, but only the array.push worked for me for initialization of array. Please, do you have any idea, what should be the problem. TypeScript and angular is new for me, thanks.
how-to-access-object-in-array-using-ng-repeat
You cant. ng-repeat is angularjs (version 1) syntax.
Ionic 2 is built on top of angular 2.
The format for for loop in template is:
<ion-item *ngFor="let c of card">
<ion-card class="styledRow">
<!-- shortened for brevity -->
</ion-item>
Documentation ngFor
I have this list in loop, in a Ionic framework
<ion-list ng-repeat = "item in ritiri.rows |filter: {'entry_by' : currentuserID}" can-frag="false">
<ion-item class="item-remove-animate item-icon-right" ng-click="ritiriview(item.id_ritiro);">
<h2>{{item.numero_spedizione}}</h2>
<p>{{item.rag_soc_mitt}}</p>
<p>{{item.indirizzo_mitt}}</p>
<p>{{item.localita_mitt}}</p>
<i class="icon ion-arrow-right-b"></i>
<ion-reorder-button class="ion-drag" on-reorder="move(note, $fromIndex, $toIndex)"></ion-reorder-button>
<ion-option-button class="button-balanced icon-left ion-happy-outline" ng-click="ritirieff(item.id_ritiro)"> Effettua</ion-option-button>
<ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="mancatiritiri(item.id_ritiro)"> Rifiuta</ion-option-button>
</ion-item>
</ion-list>
I need to change te color of div of every listed item if item.id_stato == 13 or 14, or 15.
How i can achieve this?
You can try using conditions on ng-class:
HTML
<div ng-class="{'colored': item.id_stato == 13 || item.id_stato == 14 || item.id_stato == 15}">
CSS
.colored {
background: color-value;
}
<ion-item [color]="colorCondition(item) ? 'primary' : 'light'">
//in your ts file
colorCondition(item : ItemSliding){
let initItem = this.incompleteOrders.indexOf(item);
let orderStatus = this.incompleteOrders[initItem].status;
if(orderStatus == 'paid'){
return false;
}else if(orderStatus == 'pending'){
return true;
}
}