I have 8 values in an Array. I am trying to bind two values in a row. Next two in next row and vice versa. But I couldn't do that in *ngFor. Please help me out.
TS
times = ["7.00 AM","8.00 AM","10.00 AM","11.00 AM","1.00 PM","2.00 PM","4.00 PM","5.00 PM"]
HTML
<div *ngFor="let time of times">
<button class="btn btn-outline">{{time}}</button>
</div>
But, displays one in each.
Expected output
Use index to get the next value in the array
<div *ngFor="let time of times; let i = index;">
<button
*ngIf="times[i + 1]"
class="btn btn-outline"
>{{time}} - {{times[i + 1]}}</button>
</div>
Related
Tried to get JSON data from the model but it is not working. Only it is working when i use this.products.allproduct['product1'];. But in my application, I am passing the object name. So, depends on passing object name data will appear.
If i use this.products.allproduct[prd]; not working. How to resolve this issue.
app.component.html:
<button (click)="getData('product1')">Product 1</button>
<button (click)="getData('product2')">Product 2</button>
<button (click)="getData('product3')">Product 3</button>
<div>
{{showData}}
</div>
app.component.ts:
getData(prd: string|number) {
this.showData = this.products.allproduct[prd];
}
demo: https://stackblitz.com/edit/angular-ivy-kng5nw?file=src%2Fapp%2Fapp.component.ts
Its array of objects and showing correctly.
Use ngFor for loop on the inner array.
<div *ngFor="let row of showData;let i = index;">
{{row.name}}
</div>
Buttons are generated using *ngFor bringing back as many different types of values available to filter by. I'm filtering on a key of 'location', therefore if there are locations of 'west' and 'england' then two buttons of 'west' and 'england' are available to filter by.
What I want to be able to do is select more than one filter. If I click 'england' all the results for 'england' come back, then if I click 'west' then 'west' comes back as well as 'england' still being "active". Currently, I can only click one filter at a time.
I think I need to assign an active class to my button then this will push an array of whats active to send to my pipe to do the filtering... ?
My filter Button
<div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
<button value="All" class="m-2 btn btn-primary" type="button">All</button>
<button [class.active]="selectedIndex === i" (click)="filteredLocation = entry.location" class="m-2 btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique; let i = index">{{entry.location}}</button>
</div>
single filter on results
<div class="timeline">
<my-timeline-entry *ngFor="let entry of timeLine | filter:filteredLocation:'location'" timeEntryHeader={{entry.year}} timeEntryContent={{entry.detail}} timeEntryPlace={{entry.place}} timeEntryLocation={{entry.location}}></my-timeline-entry>
</div>
I have created a stackBlitz of what I've got - try clicking on a filter you will see only one filter can be applied at one time. https://stackblitz.com/edit/timeline-angular-7-nve3zw
Any help here would be awesome. Thanks
There can be multiple ways to do that one would be to attach some property to determine if location is active for example isLocationActive
Then toggle this flag as per your need and to apply active class also you don't need filter pipe in that case
So your html will look like
<div class="form-group row">
<div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
<button value="All" class="m-2 btn btn-primary" (click)="activeAllEntries()" type="button">All</button>
<button [class.active]="entry.isLocationActive" (click)="entry.isLocationActive = !entry.isLocationActive" class="m-2 btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique; let i = index">{{entry.location}}</button>
</div>
</div>
<div class="timeline">
<ng-container *ngFor="let entry of timeLine">
<my-timeline-entry *ngIf="entry.isLocationActive" timeEntryHeader={{entry.year}} timeEntryContent={{entry.detail}} timeEntryPlace={{entry.place}} timeEntryLocation={{entry.location}}></my-timeline-entry>
</ng-container>
</div>
TS function
activeAllEntries() {
this.timeLine.forEach(t=> t.isLocationActive=!t.isLocationActive)
}
working Demo
I'm new to Vue JS, and i'm having a little problem
i'm looping through an array and i have a button inside the div that i'm looping with
the idea is to get the data of the specified data after the click event
for example let's say i have this array numbers: [1,2,3,4,5] and i'm looping through it like this
<div v-for="number in numbers">
<p>{{ number }}</p>
<button v-on:click="getTheSelectedOne"> Get The Value </button>
</div>
i tried doing so
<button v-on:click="getTheValueOfTheSelectedOne(number)"> Get The Value </button>
but i got an error,
how can i achieve such a result ?
<div v-for="number in numbers">
Should be:
<div v-for="(number, index) in numbers" :key="index">
The following:
<button v-on:click="getTheSelectedOne"> Get The Value </button>
Should be:
<button v-on:click="getTheSelectedOne(number)"> Get The Value </button>
And you must have that method defined:
methods: {
getTheSelectedOne (number) {
// then number will be the number
console.log(number)
}
}
I am displaying my nested for loop correctly but I am having trouble when highlighting the individual selected li element in the nested array, so the undesired result is everything in that row highlights based on whatever number i is.
<div class="nopadding week" style="width: 12%;" *ngFor="let day of Schedule; let j = index">
<ul class="nopadding">
<div *ngFor="let hour of day.hours; let i = index" class="hours">
<li class="hour" [ngClass]="{watched: hour.assignments.length> 0, unassigned: hour.assignments.length <= 0}" (click)="selectedtimeslot(hour.assignments, i)" [class.active]="i == selectedRow">
{{hour.assignments.length}}
</li>
</div>
</div>
</ul>
</div>
In my component I have the function that set that value of the selected row.
selectedtimeslot(item: any, index:any) {
this.selectedRow = index;
this.highlightGuardian.changeNav(item);
}
scss
li.active {
background-color:#123456 !important;
color: white;
}
I think I know my problem is that I am nit giving the [class.active] any information about the parents index in order to correctly highlight the selected element
You are correct that your issue is you aren't giving it any parent information, so it is highlighting the selected index of every parent.
Instead of making your selectedRow be equal to a number, make it an hour, and send it the hour, like so.
<div *ngFor="let hour of day.hours; let i = index" class="hours">
<li class="hour" [ngClass]="{watched: hour.assignments.length> 0, unassigned: hour.assignments.length <= 0}" (click)="selectedtimeslot(hour.assignments, hour)" [class.active]="hour == selectedRow">
{{hour.assignments.length}}
</li>
</div>
This will ensure that it only matches that single div, as it will do an object compare, instead of an index compare.
I am trying to sort my home list based on ratings, pricing and total counts. Unfortunately not working for me, I am new in angularjs.
Here I have my html code. Actually it is sorting the things but not in order.
->When user clicks on price btn he should get home with highest price first then lower , lowest etc.(5000,4000,3000) if again he clicks then order must be (3000,4000,5000). Similar things for total counts and rating. I have also created plunker to edit your suggestions. please edit and provide me the working link. Here is demoForEdit.
//html code
<body ng-controller="MainCtrl as ctrl">
<div class="col-md-offset-2">
<button ng-click="orderByPopularity='total_counts'; reverseSort = !reverseSort" class="btn btn-sm btn-info">sort on total counts </button>
<button ng-click="orderByPopularity='price'; reverseSort = !reverseSort" class="btn btn-sm btn-danger">sort on Price</button>
<button ng-click="orderByPopularity='avg'; reverseSort = !reverseSort" class="btn btn-sm btn-success">sort on ratings</button>
</div>
<br>
<div ng-repeat="home in homes | orderBy:orderByPopularity:reverseSort">
<div class="panel panel-primary ">
<div class="panel-heading">
Home name: {{home.home_name}}
</div>
<div class="panel-body">
<div class="panel panel-body">
<table>
<p>total counts:{{home.total_counts}}</p>
<p>city:{{home.city}}</p>
<p>Price:{{home.price}}</p>
<div ng-repeat="rate in rating">
<!-- looping inside ng-repeat rating is seprate data but has home id-->
<div ng-if="rate.home_id==home.id">
Home raintgs:{{rate.avg}}
</div>
</div>
</div>
</div>
</div>
</div>
//My app.js code
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.homes=[{"id":"48","home_name":"Swastik","city":"Banglore","zipcode":"888888","total_counts":"1","price":"5000"},
{"id":"49","home_name":"Khushboo","city":"Chennai","zipcode":"456786","total_counts":"17","price":"3333"},
{"id":"50","home_name":"Raj","city":"Hydrabad","zipcode":"123455","total_counts":"2","price":"20000"}];
$scope.orderByPopularity ='total_counts';
$scope.reverseSort = true;
$scope.rating=[{"home_id":"48","avg":"3.5"},
{"home_id":"49","avg":"2"},
{"home_id":"50","avg":"4"}
];
});
It does sort, but your total_counts values are strings, so it orders them lexicographically. If you want to order by number, which I assume you do, you need to remove the quotes and have their values as the number themselves, i.e.: "total_counts":17 etc..
EDIT: Modified so you could keep your values as strings (inside the custom sorting function).
As for avg rating ordering, you can't do that since your ordering is on $scope.homes, and this array's objects don't have the avg property, that is a property for your other array - $scope.ratings.
To sort by that property, you'll have to create your own custom function.
$scope.myValueFunction = function(o) {
if ($scope.orderByPopularity == "avg") {
var obj;
for (var i = 0; i < $scope.rating.length; i++) {
if ($scope.rating[i].home_id == o.id) {
obj = $scope.rating[i]
}
}
return obj.avg;
}
else {
return parseInt(o[$scope.orderByPopularity]);
}
};
And in the HTML:
<div ng-repeat="home in homes | orderBy:myValueFunction:reverseSort">
Look at this Plunker as for a demonstration.