I have a two arrays. An array that is a set of images and an array that is a set of data.
Is there a way to check the checkbox when the IDItem in the two arrays are the same?
DEMO
.html
<ul class="mdc-image-list my-image-list" style="margin-top:120px;padding-left: 10px;padding-right: 10px;">
<ng-container *ngFor="let product of items; let j = index;">
<li class="mdc-image-list__item">
<div class="mdc-image-list__image-aspect-container">
<img [src]="product.image" class="mdc-image-list__image">
</div>
<div class="mdc-image-list--with-text-protection">
<div class="mdc-image-list__supporting mdc-image-list__supporting">
<span class="mdc-image-list__label">{{product.name}}</span>
</div>
<div class="Info">
<dx-check-box (onValueChanged)="change($event);" [value]="false"></dx-check-box>
</div>
</div>
</li>
</ng-container>
</ul>
.TS
items=[
{
ID:1,
IDItem:1,
image:"https://material-components-web.appspot.com/images/photos/2x3/3.jpg",
name:"name1"
},
{
ID:2,
IDItem:2,
image:"https://material-components-web.appspot.com/images/photos/3x2/10.jpg",
name:"name2"
},
{
ID:3,
IDItem:3,
image:"https://material-components-web.appspot.com/images/photos/2x3/6.jpg",
name:"name3"
},
]
data=[ {
ID:1,
IDItem:1,
},
{
ID:2,
IDItem:2,
},]
change(e){
console.log(e)
}
In this case, IDItem 1 and 2 are present in the items and data arrays. Is there a way for these items to mark the checkbox as checked?
You could achieve this by making a function to check if the current product.IDItem is present in any of the objects in the data array, and if it is, set the value property of your checkbox to true.
TS (ES2016+)
isProductInData( productId ) {
const dataIds = this.data.map( i => i.IDItem );
return dataIds.includes( productId );
}
TS (Pre-ES2016)
isProductInData( productId ) {
const dataIds = this.data.map( i => i.IDItem );
return dataIds.indexOf( productId ) !== -1;
}
This will return true if the productId you pass in exists as a IDItem in any object in the this.data array
HTML
<ul class="mdc-image-list my-image-list" style="margin-top:120px;padding-left: 10px;padding-right: 10px;">
<ng-container *ngFor="let product of items; let j = index;">
<li class="mdc-image-list__item">
<div class="mdc-image-list__image-aspect-container">
<img [src]="product.image" class="mdc-image-list__image">
</div>
<div class="mdc-image-list--with-text-protection">
<div class="mdc-image-list__supporting mdc-image-list__supporting">
<span class="mdc-image-list__label">{{product.name}}</span>
</div>
<div class="Info">
<dx-check-box (onValueChanged)="change($event);"
[value]="isProductInData( product.IDItem )">
</dx-check-box>
</div>
</div>
</li>
</ng-container>
</ul>
Related
I am creating a FAQ page with accordion buttons, with groups of buttons under sub-headers. I designed it using an ngFor statement in the faq.html file.
<h1>Frequently Asked Questions</h1>
<div *ngFor="let item of data; let i = index;">
<button class="accordion" (click)="toggleAccordion($event, i)"> {{item.parentName}} </button>
<div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive">
<p> {{child.propertyName}} </p>
</div>
Here is a snippet of the faq.ts file.
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-faq',
templateUrl: './faq.html',
styleUrls: ['./faq.scss']
})
export class FaqComponent implements OnInit {
data: any = [
{
parentName: 'Question 1A',
childProperties: [{ propertyName: 'Answer 1A' }],
},
{
parentName: 'Question 2A',
childProperties: [{ propertyName: 'Answer 2A' }],
},
{
parentName: 'Question 3A',
childProperties: [{ propertyName: 'Answer 3A' }],
},
{
parentName: 'Question 1B',
childProperties: [{ propertyName: 'Answer 1B' }],
},
{
parentName: 'Question 2B',
childProperties: [{ propertyName: 'Answer 2B' }],
},
];
}
I want to put sub-headers over Section A (Questions 1A, 2A, and 3A), and Section B (Questions 1B and 2B). I think I can use slice in the ngFor statement in faq.html, but the code won't compile.
I tried this slice pipe:
<div *ngFor="let item of data | slice:0:2; let i = index;">
What should I change to get it to compile and break up the FAQ sections? Is the slice pipe the way to go?
Slicing Your Data
The problem here is that the slice pipe returns your data as type unknown. There are a couple of ways around this:
$any
<p *ngFor="let item of data | slice:2:4">
{{ $any(item).parentName }}
</p>
Bracket notation
<p *ngFor="let item of data | slice:2:4">
{{ item['parentName'] }}
</p>
A function
slicedData(data : any[]) : any[] {
return data.slice(2,4)
}
<p *ngFor="let item of slicedData(data)">
{{ item['parentName'] }}
</p>
You might want to properly type your data though, instead of using any. It is called Typescript for a reason after all.
Here are some examples in a Stackblitz.
I had to change the html to access the properties in different way and it got compiled:
<div *ngFor="let item of data; let i = index;">
<button class="accordion" (click)="toggleAccordion($event, i)"> {{item['parentName']}} </button>
<div class="panel" *ngFor="let child of item['childProperties'] | slice:0:2; let i = index;" hide="!item.isActive">
<p> {{child['propertyName']}} </p>
</div>
You can just add one *ngIf and check if i < 3:
<h1>Frequently Asked Questions</h1>
<div *ngFor="let item of data; let i = index;">
<ng-container *ngIf="i < 3">
<button class="accordion" (click)="toggleAccordion($event, i)"> {{item.parentName}} </button>
<div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive">
<p> {{child.propertyName}} </p>
</ng-container>
</div>
Thank you for your help, everyone. I changed faq.html to:
<h1>Frequently Asked Questions</h1>
<h2>General</h2>
<div *ngFor="let item of data; let i = index;">
<ng-container *ngIf="i < 3">
<button class="accordion" (click)="toggleAccordion($event, i)"> {{item.parentName}} </button>
<div class="panel" hide="!item.isActive">
<p> {{item.childName}} </p>
</div>
and it worked.
I need to get selected item but in nested array.
First check my code:
<div class="column-holder" *ngFor="let training of data.trainingExercise
{
"exerasdasd":""
},
{
"isWsadad":""
}
]
}
]
}
]
}
Now i need on click to get only selected set. Single Value!
dsadsa(e){
dsa.log(e)
dsa.dsadas = e;
}
This is good but i need only single value.
In my selectedSetValue i want to show only single value.
Right now i got values in all array.
I want only selected value and selected index. This is important selected values by index
both here
<div class="column-holder" *ngFor="let training of data.trainingExercises; let i = index;">
and here
<div class="second-box-70" *ngFor="let set of training.sets; let i = index;">
you have let i = index;. Change the second one to let j = index; or something, so they are not the same
please try this, change
<div class="second-box-70" *ngFor="let set of training.sets; let i = index;">
<div class="circle-exercise">
<div class="circle-div">
<div class="num-series">
Series
</div>
<div class="circle" (click)="selectedSet(set)">
<input [(ngModel)]="set.value" class="input-invisible-for-sets" type="type">
</div>
</div>
</div>
</div>
<p class="notes" *ngIf="selectedSetValue">
{{ this.selectedSetValue.note }}
</p>
</div>
to this
<div class="second-box-70" *ngFor="let set of training.sets; let j = index;">
<div class="circle-exercise">
<div class="circle-div">
<div class="num-series">
Series
</div>
<div class="circle" (click)="selectedSet(set,j)">
<input [(ngModel)]="set.value" class="input-invisible-for-sets" type="type">
</div>
</div>
</div>
</div>
<p class="notes" *ngIf="selectedSetValue">
{{ this.selectedSetValue.note }}
</p>
</div>
ts
selectedSet(object,index){
this.selectedSetValue = object;
}
If I have this array :
array = [
{
img: [
{0: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
{1: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
],
}
{
img: [
{0: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
{1: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
],
}
]
How do I display it in HTML ? I know how to display one img if it was img : 'url' it would look like this ;
this.imgs = this.myprovider.getArray();
HTML :
<div ngfor="let item of imgs">{{item.img}}</div>
Since your key in the array of img objects is a number starting at 0, you can just use the loop index to access the value:
<ul>
<li *ngFor="let item of array">
<ul>
<li *ngFor="let image of item.img; let i = index">
<img src="{{ image[i] }}" />
</li>
</ul>
</li>
</ul>
Stack Blitz doesn't want to load the image URLs for some reason, but as you can see from the output, the HTML is correct: https://stackblitz.com/edit/nested-array-example
Try
<div ngfor="let item of imgs">{{item.img.toString()}}</div>
or
<div ngfor="let item of imgs">
<div ngfor="let img of item.img">{{img}}</div>
</div>
You can iterate twice in nested manner -
<ng-container ngfor="let childImages of imgs">
<div ngfor="let item of childImages">{{item.img}}</div>
<ng-container>
Note : You should use instead of any other html element otherwise it will distort html look & feel.
<div *ngFor="let item of imgs">
<div *ngFor="let img of item.img; let i=index;">{{img[i]}}</div>
</div>
The array is structured like so
$scope.structure = {
sections: [{
id:0,
sectionItems: []
},{
id:1,
sectionItems: []
},{
id:2,
sectionItems: []
}]
};
I have a nested ng-repeat so I can show items within sectionItems[]
(Inside should be objects and one of the keys is Name - not relevant)
<div ng-repeat="sections in structure.sections" class="col-md-12">
<div class="panel panel-info">
<ul class="screenW-section">
<li class="col-xs-6" ng-repeat="item in sections.sectionItems"
ng-click="item.splice($index, 1)">
{{item.Name}}
</li>
</ul>
</div> </div>
I want to be able to remove items on click but the
ng-click="item.splice($index, 1)
Is not working no matter how I format it.
try this:
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
$scope.structure = {
sections: [{
id:0,
sectionItems: ['1','2','3']
},{
id:1,
sectionItems: ['11','21','32']
},{
id:2,
sectionItems: ['12','22','32']
}]
};
$scope.remove = function(sectionItems,index){
sectionItems.splice(index, 1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<div ng-repeat="sections in structure.sections" class="col-md-12">
<div class="panel panel-info">
<ul class="screenW-section">
<li class="col-xs-6" ng-repeat="item in sections.sectionItems"
ng-click="remove(sections.sectionItems,$index)">
{{item}}
</li>
</ul>
</div> </div>
</div>
To remove an item you need to remove it from the array.
So, for example, you could do
ng-click="remove(sections.sectionItems, $index)"
in the view, and
$scope.remove = function(array, index) {
array.splice(index, 1);
}
in the controller...
You're calling splice on the item and not the array
ng-click="sections.sectionItems.splice($index, 1)"
In my KnockoutJS app, I am looping over an observable array and displaying some stuff like this:
<div id="user-list-container" data-bind="foreach: users">
<div class="row order-line list-row">
<div class="medium-7 small-10 columns">
<i class="fi-torso tip-right"></i>
</div>
<div class="medium-3 columns">
<a href="#" class="button split tiny info radius">
<i data-bind="text:role"></i>
<span data-dropdown="leftDrop" data-options="align:left"></span>
</a>
</div>
<div class="medium-2 small-2 columns">
<i class="fi-trash" title="#Texts.Remove"></i>
</div>
<ul id="leftDrop" class="f-dropdown" data-dropdown-content>
<li>Foreman</li>
<li>Worker</li>
</ul>
</div>
</div>
Everything works fine and all the elements are shown, but when I click one item to operate on that particular item, each item then has the value of last item in the array.
In my Javascript function:
self.makeWorker = function (user) {
var project = self.selectedProject();
var account = self.accounts.findByKey(user.accountId);
var ur = user;
console.log(user);
console.log(this);
if (project.role() != "Worker") {
var data = {
role: "Worker",
organizationId: project.organizationId,
projectId: project.id,
accountId: user.accountId
}
TippNett.Project.ChangeRole(data, function (result) {
project.users.findByKey(user.id).role("Worker");
ur.role("Worker");
account.roles.findByKey(user.id).role("Worker");
});
}
}
The value passed to the function is always the last value in 'users' observable array.
Any input on why this is happening? See the image for more briefing: