i have minimal reproduce here https://stackblitz.com/edit/angular-uwfsyv?file=app%2Fapp.component.html, there i have 2 array,checkboxesDataList and checkboxesDataList2 i successfully get the checked label from checkboxesDataList but that's just for an example.
but what i wanted to get in my project is similar to checkboxesDataList2 inside here i have object question and checkboxesDataList don't have that so this function
fetchSelectedItems() {
this.selectedItemsList = this.checkboxesDataList.filter((value, index) => {
return value.checked;
});
}
won't work immediately if i change this.checkboxesDataList to this.checkboxesDataList2 how can i make it work?
do you want to has a function like?
getDataChecked()
{
return this.checkboxesDataList2.question
.map(x=>x.options.filter(o=>o.checked))
.reduce((acc, value)=>[...acc,...value])
}
Related
What I'm trying do is when the user adds item to cart more than once I would like it to be a separate image instead of just adding to the quantity. I have it now where if product exist in the cart it just adds to the quantity. The reason I need this change is because now there are product sizes associate with the product using radio buttons and this won't work the way it currently is. I tried manipulating the code but I still get same result or get cart is empty. Can someone point me in the right direction. I have included code snippet.
cart.service.ts
getCartItems(): Observable<CartItem[]> {
return this.http.get<CartItem[]>(cartUrl).pipe(
map((result: any[]) => {
let cartItems: CartItem[] =[];
for(let item of result) {
let productExists = false
for(let i in cartItems){
if(cartItems[i].productId === item.product.id){
cartItems[i].qty++
productExists = true
break;
}
}
if (!productExists){
cartItems.push( new CartItem(item.id,item.product,item.imageUrl));
}
}
return cartItems;
})
);
}
Thanking You In Advance
Are you sure you tried to modify the code?
In this chunk you are doing the quantity of the product and setting the flag for pushing or not the item with the image
for(let i in cartItems){
if(cartItems[i].productId === item.product.id){
cartItems[i].qty++
productExists = true
break;
}
In this other chunk you literally are reading the flag from the last "for" and pushing if the flag is false
if (!productExists){
cartItems.push( new CartItem(item.id,item.product,item.imageUrl));
}
You can do a for to push all the items without any validations or adding to the "qry"
I took out all the validation like Cayman suggested and now it works the way I need it to for the application. The previous code was checking if exist which I don't need because I want to load another product even if it does exist. Part of previous code is still good for situations when you don't want to add a product that already exist for example a wish list or favorites. Correct code snippet without validation below:
getCartItems(): Observable<CartItem[]> {
return this.http.get<CartItem[]>(cartUrl).pipe(
map((result: any[]) => {
let cartItems: CartItem[] =[];
for(let item of result) {
cartItems.push( new CartItem(item.id,item.product,item.imageUrl));
}
return cartItems;
})
);
}
PDH
I'm trying to get my edit function to work so that when I click on the text, it becomes editable and It stays as what I edit it to. I also want help making a function that adds or removes a class called complete to a list item so that it uses a different CSS style.
here is the git hub https://github.com/EthanKettle/ToDo
const text = document.getElementById('todo-li-${index}').value;
if(text) {
editText(text)
showTodo();
}
save();
};
function markComplete () {
document.getElementById('todo-li-${index}').HTML = `class="complete"`;
}
I'm quite new to angular and wanted to know how to make it so i can have 1 page that you put the info you want to filter in the table and when you press "search" it will lead you to the second page where you see the table after its filtered.
i my question is odd but i really couldn't find any answer how to do this online.
I cant share code as its confidential to my work.
Something that looks like this site : https://maerskcontainersales.com/
I have tried using mock data but still couldn't put my head into the right thing to do.
There can be multiple ways how you can achieve this.
Using Provider
Suppose you have two pages and , serach-page is where you will enter your filters and result-page is where the table renders.
In search-page, you will create inputs( ex: textbox, dropdown etc ) and have ngModels for all of them, or you can use Angular reactive forms i.e FormGroup and FormControls. Users will select their input and click on search button, which will read values from models or controls and store them in the provider.
search-page.component.html
<form [formGroup]="searchForm" (submit)="search()">
<input formControlName="country" />
<input formControlName="city" />
...
<input type="submit">
</form>
search-page.component.ts
export class SearchPage {
...
search() {
const country = this.searchForm.get('country').value
...
// get rest of the values
...
this.searchService.setData({ country, city });
this.router.navigate(['/result']); // '/result' is path on the result-page
}
...
}
search.service.ts
#Injectable()
export class SearchService {
_data : any;
set data(val) {
this._data = val;
}
get data() {
return this._data;
}
}
result-page.component.ts
export class ResultPage {
...
ngOnInit() {
const filters = this.searchService.getData();
// filters will be your data from previous page
}
...
}
Using RouterParams
search-page.component.html
// same as before
search-page.component.ts
export class SearchPage {
...
search() {
const country = this.searchForm.get('country').value
...
// get rest of the values
...
this.router.navigate(['/result', { country, city }]); // '/result' is path on the result-page
}
...
}
result-page.component.ts
export class ResultPage {
...
constructor(route:ActivatedRoute) {
this.country = route.snapshot.paramMap.get("country")
// alternatively you can also do below
route.paramMap.subscribe(filters => {
// you will have your filters here
});
}
...
}
And once you have values of filters in result-page, use them to get data or filter data if already fetched, then render the table accordingly.
Let me know if I wasn't clear.
The simple solution I would suggest you to use a filter component and a results component a third container component. This component will get the filter criteria as an input variable and will output the filter criteria (using an output variable) when you press the "filter" button.
The container app will look like this:
<filterComponent (onFilter)="changeFilter($event)" [data]="someDate" *ngIf="!filterCriteria"></filterComponent>
<resultsComponent [data]="someDate" [filterCriteria]="filterCriteria" *ngIf="!!filterCriteria"></resultsComponent>
The filterCriteria that is sent to the second tableComponent will come from the eventEmmiter of the first tableComponent. The filterCriteria variable will be initiate to null and this will allow you to switch from one table to the other.
Hi I am trying to get a filter to return instances that have a certain quantity but can't seem to get it to work. What I have in my HTML:
I would like my filter to apply when I hit this checkbox:
<input type="checkbox" value="true" ng-model='filterSales' >
Heres what I have:
<div class='col-md-12' ng-repeat='sku in value | QuantityFilter'>
I was just able to learn how to create a custom filter but now I am having trouble figuring out how to toggle it.
If you just want to know how you can see whether the checkbox is set or not, you can add a parameter to your filter function as shown in the example at the bottom of the documentation: https://docs.angularjs.org/api/ng/filter/filter
You would need to add :filterSales to your ng-repeat where you apply the filter.
<div class='col-md-12' ng-repeat='sku in value | quantityFilter:filterSales'>
In js you need to add another parameter, in this example "array" contains the array which is repeated (in your case "value") and toggleVar has the checkbox value.
"use strict";
app.filter("quantityFilter", function () {
function quantityFilter(array, toggleVar) {
if(!toggleVar){
return array;
}
let result = [];
// TODO: Build new array based on your criteria
return result;
}
return quantityFilter;
});
I'm looking to hook-up sort events performed on ng2-smart-table. Followed https://akveo.github.io/ng2-smart-table/#/documentation, I see bunch of events that are exposed like rowSelect, mouseover etc but I don't see sort events published/emitted by the library. I'm thinking of changing Ng2SmartTableComponent and emit an event when (sort) is called internally. May I know if anyone did it already or is there a hack I can rely upon.
The source of the sort in ng2-smart-table is shown on GitHub (link to code).
If you want to change the compare-Function (as used by default) you can add your own custom function in your ng2-smart-table-configuration:
columns: {
group_name: {
title: 'Groupname',
compareFunction(direction: any, a: any, b: any) => {
//your code
}
}
}
I was searching for an event to sort my data remotely and I have found a solution. Also I have some logic for page change event (remote paging). Here is what works for me.
ts
source: LocalDataSource = new LocalDataSource();
ngOnInit() {
this.source.onChanged().subscribe((change) => {
if (change.action === 'sort') {
this.sortingChange(change.sort);
}
else if (change.action === 'page') {
this.pageChange(change.paging.page);
}
});
}
html
<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
This solution won't replace custom logic but it might help you solve your problem.