I have the following code:
<li *ngFor="let item of serviceList; let i = index;">
<button *ngIf="currentTools contains i" (click)="processService(item)">
Run Service</button>
</li>
Is there any way in Angular 2 to check if an array contains the index of my item?
I basically only want to show the items when their index number is in an array (currentTools), which is dynamically modified in a different process.
<li *ngFor="let item of serviceList; let i = index;">
<button *ngIf="currentTools.indexOf(i)>-1" (click)="processService(item)">
Run Service
</button>
</li>
Try this
You need to avoid function call inside a data binding like *ngIf. Taking this in to account, you should probably do this
<li *ngFor="let item of serviceList; let i = index;">
<ng-container *ngFor=let currentTool of currentTools>
<button *ngIf="currentTool === i" (click)="processService(item)">
Run Service</button>
</ng-container>
</li>
You can get more info about why not tu call function inside data binding here Don't Use Functions Inside Angular Templates and What to Use Instead
Also, you can check a similar answer here
Related
The premise of this question is that in the following TS block, I am creating an array that is made from the given map's keys and console logging to ensure that the arrays are created as needed.
public certKeys: String[];
public certMap: Map<String, DataObject[]> = new Map();
public allData: DataObject[];
#Input()
set data(data: DataObject[]) {
if (!data) { return; }
new Set(data.map(i => i.certTypeDescription)).forEach(i => {
this.certMap.set(i, []);
});
data.forEach(i => {
this.certMap.get(i.certTypeDescription).push(i);
});
this.certKeys = Array.from(this.certMap.keys());
this.allData = data;
console.log(this.certMap);
}
Now when this translates to the HTML portion of this, I am wanting to display the most recent record (or the [0] element) of each key array. This is already being accomplished. However, the other portion is that in the accordion drop down, I need to retrieve the rest of the elements save for the [0] element. below you will see what I have so far:
<app-basic-card myTitle="Data">
<i cardIcon class="uxd uxd-mode-edit uxd-lg uxd-pointer text-primary" (click)="openEditDialog()"></i>
<div cardBody class="accordion" *ngIf="allData; else loading">
<p *ngIf="allData?.length === 0">
No allData found...
</p>
<mat-accordion *ngIf="allData?.length>0">
<mat-expansion-panel *ngFor="let cert of certKeys">
<mat-expansion-panel-header>
<mat-panel-title class="list-group list-group-flush">
<ng-container>
<div>
<div class="w-50 float-left">{{cert}}</div>
<div class="w-50 float-right">
<i class="uxd uxd-lg" [ngClass]="getCertIcon(certMap.get(cert)[0]?.certificationResult)"></i>
{{getDateTaken(certMap.get(cert)[0].certificationDate)}}
</div>
</div>
</ng-container>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-container>
<div *ngFor = "let certKeys of allData">
<div class="w-50 float-left">{{cert}}</div>
<div class="w-50 float-right">
<i class="uxd uxd-lg" [ngClass]="getCertIcon(certMap.get(cert).certificationResult)"></i>
{{getDateTaken(certMap.get(cert).certDate)}}
</div>
</div>
</ng-container>
</mat-expansion-panel>
</mat-accordion>
</div>
<ng-template cardLoading #loading class="text-center">
<mat-spinner class="loading-spinner" style="margin:0 auto;" diameter="50"></mat-spinner>
</ng-template>
</app-basic-card>
My question is how do I accomplish retrieving every element but the [0] element of each key array? There is something that I very obviously am missing. I would appreciate any answers that are given and resources that may point me in the right direction. I thank you all for your time.
I don't know Angular tbh, but if you can modify the array you could use slice method, which returns a shallow copy of the original array, so the original will stay untouched.
Can you change this line:
<div *ngFor = "let certKeys of allData">
Into this:
<div *ngFor = "let certKeys of allData.slice(1)">
?
Working snippet of the slice() function.
const items = [1, 2, 3, 4];
const itemsWithoutTheFirstItem = items.slice(1);
// Target array contains all but first item
console.log(itemsWithoutTheFirstItem);
// Original array stays the same
console.log(items);
I think of two options right now. The first one is using *ngIf or a simple Pipe.
First option:
<mat-expansion-panel *ngFor="let cert of certKeys; let index = index">
<mat-expansion-panel-header *ngIf="index > 0">
...
</mat-expansion-panel>
Second option:
Create a Angular Pipe, which returns a new array except the first entry:
#Pipe({name: 'ignoreFirst'})
export class IgnoreFirstEntryPipe implements PipeTransform {
transform(arr: any[]) {
// Returns a new array without the original first entry
return arr.slice(1);
}
}
And in your html:
<mat-expansion-panel *ngFor="let cert of certKeys | ignoreFirst">
<mat-expansion-panel-header>
...
</mat-expansion-panel>
I have the following:
<li ng-repeat"item in items" ng-if="item.type && item.type=='image'">
<span ng-class="{'selected':$first}">{{item.title}}</span>
</li>
What I'm trying to do is display all item Titles only if it's of type image, and have the first item have the class selected.
The issue comes with the ng-if. If the first item is not of type image, then the actual first item shown does not have the selected class.
How do I update this?
You could create a new list that only has images. Then ng-repeat over that:
$scope.onlyImages = $scope.items.filter(function(item) {
return item.type && item.type === 'image';
});
<li ng-repeat"item in onlyImages">
<span ng-class="{'selected':$first}">{{item.title}}</span>
</li>
You could also do this in the template with a filter, but it would be more expensive since it runs on each digest cycle.
I have a simple ngFor that loops through an array. However, I've added a condition that while the index is < 5 keep add the tag. and After that, I want to add an extra tag just once that will be used a dropdown to view the rest of the tags. But it doesn't work.
<li *ngFor="let tag of module.Tags; let i = index">
<a *ngIf="i<5" href="#" class="span-tag tag">{{ tag }}</a>
<div *ngIf="module.Tags.length > 5 && i == 6">DropDown Button</div>
</li>
The feature here is that I don't want to show unlimited number of tags to the user, I want to limit it to only 5 tags, and have a button after 5 tags which will be used to show the dropdown with the remaining tags.
Is this possible to do in angular2?
If so, please enlighten me.
<li *ngFor="let tag of module.Tags | slice:0:5; let last=last">
{{ tag }}
<div *ngIf="last">DropDown Button</div>
</li>
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
To get all added but the <div>DropDown Button</div> added after the 5th item you can use:
show = 5;
<li *ngFor="let tag of module.Tags|slice:0:show let i=index">
{{ tag }}
<div *ngIf="i==4 && show == 5" (click)="show = module.Tags.length">DropDown Button</div>
</li>
<div (ng-repeat='item in items') >
{{item.name}} //works
{{item["name"]}} // works
</div>
how do i repeat item[property] dynamically without using ".name" or ['name']?
To dynamically go through properties, you're going to need to call Object.keys(item) and then iterate through them. It's best to prune your data from within your controller, to minimize the finagling you'll need to do within your HTML.
If you do want to try to do this within your HTML-Angular structures, you could define:
$scope.returnAllKeyValues = function(obj){
var x = Object.keys(obj),
arr = [];
for(var i = 0; i<x.length; i++){
arr.push(obj[x[i]]);
}
return arr;
}
What this function does is it takes in your JSON object, then parses through it and collects all the values for every key within it.
Then, within your HTML, you can write something like this:
<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items">
<span ng-init="keyValues = returnAllKeyValues(item)">
<span ng-repeat="keyValue in keyValues">{{key}} </span>
</span>
</li>
</ul>
</div>
Here you see, within your original ngRepeat, we initialized the array keyValues with all the values from item's keys via the function defined above. Then, ng-repeat through that, and you have everything printed without knowing what they are.
Here is a Fiddle with it working:
http://jsfiddle.net/RkykR/2771/
This was what i was looking for....Thanks
https://www.codementor.io/debugging/4948713248/request-want-to-use-values-in-nested-ng-repeat
I am using ng-repeat on a <tr> tag to populate the <td> tags with data pulled from mysql and converted into Json. This works just fine. However, one of the <td> tags that I'm using contains a button.
What I would like to do, is have each of these buttons identified somehow in the DOM, so that I can target then with specific requests.
Example: Page loads, ng-repeat repeats a button 4 times. Each of these buttons would have an ng-click attached to it. I want each of them to open and filter different information in a json file.
Am I correct in assuming that ng-repeat would simply open the same item for each button, and how would I go about making them seperate? thanks.
You can do something like this on the front-end:
<button ng-repeat="item in items track by $index" ng-click="someFunction($index)" >Something happens</button>
Then in your controller:
$scope.someFunction = function (index) {
if (index === 1):
// etc.
else...
// Or use switch, whichever works for you.
You could create the specific function on each item in the array.
<button ng-repeat="button in buttons" ng-click="button.functionName()">{{button.name}}</function>
There's $index for that. It's a very good habit to take for any of your ng-repeat. Also don't forget bind-once if your buttons UI isn't subject to modifications once the DOM has loaded.
<ul>
<li ng-repeat="page in pages">
<a ng-class="{ testClass: $index == pageNumber }" ng-click="setPageNumber($index)">{{ page }} - index is : {{$index}}</a>
</li>
</ul>
http://jsfiddle.net/bonatoc/4z1t4gsm/3/
Also you could do (using bind-once):
<button
ng-repeat="button in ::buttons track by $index"
id="button_{{$index}}"
class="{{button['css_class']}}"
...given your buttons were a JSON object as well (beware, ng-repeat likes arrays, not objects. Arrays of objects are fine):
$scope.buttons = [
0: {
'css_class': someClass,
'functionToTrigger': function(...
// ...