So I am basically trying to set a highlight if an object is selected already. How can I compare the objects to change classes? Something like this
<[ngClass]="{{perkResult.perk === perk.perk}} ? 'highlight' : 'none-hightlight' ">
Current code:
<div class="col-xs-12">
<div class="col-xs-12 benefit-selection">
<ul class="benefits-dropdown-ul" *ngIf="perkList"> .
<a class="benefits-dropdown-div" *ngFor="let perkResult of perkList.results" (click)="onAddPerk(perkResult)">
//highlight here
<li class="benefits-dropdown-li">{{ perkResult.perk }}</li>
</a>
</ul>
</div>
</div>
<div class="col-xs-6 benefit-selected" *ngFor="let perk of company.perks; trackBy: customTrackBy; let i = inde
{{ perk.perk }}
</div>
You do not need the interpolation brackets {{}}. In this case, [ngClass] is looking for an expression, so
[ngClass]="perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight'"
or
[ngClass]="[perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight']"
will work.
You want the whole expression inside {{}} to evaluate to the class string you want
[ngClass]="{{perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight'}}"
Related
I am new to Angular, and I am trying to style items after the 6th child but it doesn't work. I can color everything, but when I add the nth-child part it doesn't work. Do I have a wrong syntax?
[ngStyle] = "div:nth-child(n+6){'background-color': 'red'}"
<p *ngIf = "status"> Secret Password is Tuna</p>
<div *ngFor="let clickLog of clickLogs"
[ngStyle]="div:nth-child(n+6){{'background-color': 'red'}}">
{{clickLog}}
</div>
<button (click)="clickEvent()">Show Details</button>
<button [disabled]="!checkIfEmty()" (click)="resetUserName()">Reser Username</button>
</div>
You can use pseudo class in the component CSS file.
app.component.css
div:nth-child(n+6) {
background-color: red
}
But you should have proper structure for it in template.
Or you can use index of ngFor.
app.component.ts
<div *ngFor="let clickLog of clickLogs; index as i"
[ngStyle]="{'background-color': i >= 6 ? 'red' : '' }">
{{clickLog}}
</div>
I am trying bind a razor variable to html attribute with vuejs.
The variable which i must use is "#culture". It is a string variable which gives me current culture information.
My code is:
<div class="dropdown-product-item" v-for="(item, index) in card.items">
<span class="dropdown-product-remove"><i class="icon-cross" v-bind:data-id="item.Id" v-on:click="removeFromCard"></i></span>
<a class="dropdown-product-thumb" v-bind:href="/#{Html.Raw(culture);}/item.Link">
<img v-bind:src="item.ResimUrl" v-bind:alt="item.Ad">
</a>
<div class="dropdown-product-info">
<a class="dropdown-product-title" v-bind:href="/#{Html.Raw(culture);}/item.Link">{{item.Ad}}</a>
<span class="dropdown-product-details" v-if="!item.IndirimliFiyat">{{pieces[index]}} x {{item.Fiyat.PriceString}}</span>
<span class="dropdown-product-details" v-else>{{pieces[index]}} x {{item.IndirimliFiyat.PriceString}}</span>
</div>
This code doesn't work. I only see white screen.
How to I do this? Could you help me?
I'm new to aurelia. I'm looking to find the best method for adding classes on click events.
I simply want to click approve or request information, and then add a class to the corresponding "contact card". This class would change the background color.
I know it's probably simple, but I thought I'd look here for the best method.
Here's an image to what I've got:
Apologies for the wait, work has been a bit busy.
This is my first time posting on S.O., so I apologize for any expectations I'm not meeting.
<div class="col-sm-4">
<button class="btn btn-success col-sm-12" click.delegate="goodBoi()">
approve contact
</button>
</div>
<div class="col-sm-4">
<button class="btn btn col-sm-12" click.delegate="requestContact()">
request information
</button>
</div>
</div>
the element to be changed is named "list-group-item", containing the
contact's details(code shown above).
<template>
<div class="contact-list">
<ul class="list-group">
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
<h4>${contact.firstName} ${contact.lastName}</h4>
<p>${contact.company}</p>
<p>${contact.email}</p>
<h6>${contact.approval}</h6>
</a>
<a route-href="route: contacts; params.bind: {id:contact.id}">
<p>${contact.phoneNumber}</p>
</a>
</li>
</ul>
</div>
goodBoi() {
let result = confirm("Are you sure you want to confirm this contact?");
if (result === true) {
var standingShell = document.getElementsByClassName("list-group-item");
//im hoping here I would add a class to the new variable//
this.contact.approval = 'approved';
this.save();
}
}
//confirms contact, changing color of approved contact//
//same thing here, just plan to give it a different color//
requestContact() {
let contactRequestText = "request sent to contact";
this.routeConfig.navModel.setTitle(this.contact.approval = contactRequestText);
this.ea.publish(new ContactUpdated(this.contact));
}
There are many ways to set a CSS-class using Aurelia. Following I prepared an example gist:
Template:
<template>
<h1>${message}</h1>
<div class="form-group ${clicked ? 'red' : 'blue'}" style="width: 100px; height: 100px;">
</div>
<div class="form-group">
<button click.delegate="save()">
Click me
</button>
</div>
</template>
And the code class:
#autoinject
export class App {
#bindable clicked = false;
save(){
this.clicked = true;
}
}
https://gist.run/?id=425993b04a977466fa685758389aa2b4
But there are other, cleaner ways:
using ref in a custom element.
custom attributes.
Include jQuery for using e.g. $('#myelement').addClass()
Relatively new to Ionic.
I have seen examples of this succeeding here in stackoverflow
http://stackoverflow.com/questions/30584948/ionic-framework-different-background-color-for-each-list-item
http://stackoverflow.com/questions/30806738/why-collection-repect-not-show-alternate-color-in-angular-js
However, I not having success in the implementation. I have my collection-repeat in an ion-item tag.
<ion-item class="item item-thumbnail-left artistList" collection-repeat="artist in artists | filter:searchText" collection-item-height = "100px" ng-click="artistDetail(artist)" on-swipe-left="onSwipeLeft(artist)">
<img ng-src="{{ artist.image }}">
<h2>{{ artist.name }}</h2>
<h4>{{ artist.email }}</h4>
<h4>{{ artist.twitter }}</h4>
<h4>Upcoming Event: {{ artist.artist_info.upcoming_events[0].datetime | date: 'MMM d, y' }} </h4>
<h4 class="defaultValue" ng-hide="artist.artist_info.upcoming_events[0].datetime"> None Yet!</h4>
<div class = "item-icon-right">
<i class="icon ion-ios-arrow-right item-right positive"></i>
</div>
<ion-option-button ng-click="payPal(artist.artist_info.paypal_link)" class="button-positive icon ion-social-usd"></ion-option-button>
<ion-option-button class="button-positive icon ion-heart"></ion-option-button>
</ion-item>
I attempted to do ng-class-odd="odd-row" ng-class-even="even-row"and have declare the css but there was no change. Does this work differently with ionic-item tag?
Here is similar to what I would like (Except I want every other to be a different color):
http://plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview
One solution could be to use the $index property of the ion-list.
Just to give you some information about $index it gives the index of current list item and starts from zero index. Means the index of first item will be zero.
As per the code provided by you the following code should work
<ion-item class="item item-thumbnail-left artistList"
collection-repeat="artist in artists | filter:searchText"
collection-item-height = "100px"
ng-click="artistDetail(artist)"
on-swipe-left="onSwipeLeft(artist)"
ng-class="$index%2 != 0 ? 'classA' : ''" >
It will added the classA on every alternate item starting from second item of list (since the index of list is started with zero)
Refer this updated Plnkr code.
Hope this will help.
I am using protractor for angular js automation. I am trying to get the 'fa fa-something' text from the below element structure using css identifier-
<div class="Itemlistcontainer">
<ul class="itemlist sortlist ui-sortable">
<!-- ngRepeat: Item in Items | orderBy:CustomSort:false --><li ng-repeat=" Item in Items | orderBy:CustomSort:false" ng-show="!searchinput || ([Item.Name]|filter:searchinput).length" ng-class="{ 'itemdisabled' : !CanUseTask(Item) || deactivate }" class="ng-scope ui-draggable">
<div bo-attr="" bo-attr-id="Item.Id" bo-attr-title="Item.Details | html2string" class="label itemlabel" id="3d991564-a1a9-49ab-8659-a26e00fbfae6" title="Blah blah blah.">
<span>
<i ng-class="itemIconClass(Item)" style="margin-right: 5px;" class="fa fa-something"></i>
</span><span bo-text="item.Name | ellipse : 32">Item Name</span>
</div>
<!--ngRepeat: Item in Items....and the list goes on
I need to know under what Item in Items was this 'fa fa-something' found. I am using element(By.css('ul.itemlist i.itemIconClass(Item)').getAttribute('class').getText()
which is not working.
element(By.css('ul.itemlist i.itemIconClass(Item)').getAttribute('class').getText()
can't work as you're trying to interpolate an angular template expression in a protractor element selector
I think you need :
element(By.css('ul.itemlist i.fa.fa-something').getAttribute('class').getText()
And to determine what Item in Items was this 'fa fa-something' found maybe you need an ID (which will be easier to read, no need to parse class attribute by extracting fa fasomething etc...