I'm trying to use [ngClass] with multiple conditions to change the caret of a open/close panel.
Currently the down arrow works flawlessly.
When I click the arrow and the condition changes to false, it changes the icon to a empty box and is not recognizing the correct class name.
<i [ngClass]="{'fa fa-caret-up pull-right': isActive4 == true,
'fa fa-caret-down pull-right': isActive4 == false}"
(click)="section4Click()"></i>
The section4Click() changes isActive4 to true/false depending on what it was before.
When I inspect element of the box that shows up after I click the down caret (which works), I get the following class name...
fa-caret-up
instead of...
fa fa-caret-up pull-right
Anyone know why this occurs? It seems like its doing half the job...
I've also tried just doing isActive4 and !isActive4, and the same happens.
It's hard to tell from looking at your code. But you can try this:
<i class="fa pull-right" [class.fa-caret-up]="isActive4" [class.fa-caret-down]="!isActive4" (click)="section4Click()"></i>
I would also recommend printing the values to see what you get:
<p>{{ isActive4 === true }}</p>
This will work.
<i class="fa pull-right" [ngClass]="{'fa-caret-up': isActive4 == true,
'fa-caret-down': isActive4 == false}"
(click)="section4Click()"></i>
Related
Good Morning,
Hope everyone had a great Easter,
Before I begin, I want to point out this is being developed in ServiceNow Orlando release, it uses AngularJS 1.6.10
I'm stuck on a tricky piece of code I can't get right, I'm using an ng-repeat to build out a catalog of hardware devices, in this case its Laptops, we have added a button which quickly allows people to add the device to the cart, we now want to add a quantity field so that multiple devices can be added at the same time, I got it working but AngularJS adds in an empty cell at the beginning, I need to get it to default to 1, I did get it to do this but it broke the cart experience as every item added to the cart is a 1 no matter what quantity is selected.
so this is most of the html code which also includes the ng-repeat that builds out the hardware devices, I am using an ng-options that everyone seems to recommend, been reading a lot in Stack Overflow.
The problem is the ng-model, as this is set to $scope.items[0] it never gets updated, I have been looking at getterSetter but very much going over my head at the moment, can't get it to work.
<div class="col-sm-6 col-md-4 funky-show-hide" ng-show="selectedCat==item.categoryBelongTo" ng-repeat="item in data.items track by $index">
<div class="panel panel- b" >
<a target="" ng-href="" ng-click="onClick($event, item)" class="panel-body block">
<div class="overflow-100">
<h4 class="m-t-none m-b-xs hrline"><span ng-if="item.content_type == 'external'"> <i ng-if="data.isDownloadable.indexOf(item.sys_id) ==-1" class="fa fa-external-link-square" aria-hidden="true" style="color: #498fcc;"></i><i ng-if="data.isDownloadable.indexOf(item.sys_id) >-1" class="fa fa-download" aria-hidden="true" style="color: #498fcc;"></i></span></h4>
<img ng-src="" ng-if="item.picture" class="m-r-sm m-b-sm item-image pull-left" />
<div class="text-muted item-short-desc"></div>
</div>
</a>
<div class="panel-footer" >
<span ng-if="item.u_show_price == 'true'" class="pull-right item-price font-bold"></span>
<button ng-if="item.u_show_add_to_cart_button == 'true' " name="submit" ng-disabled="submitted" ng-click="triggerAddToCart(item.sys_id, selected.label)" class="btn btn-primary">${Add to Cart}</button>
<select ng-if="item.u_show_quantity_button == 'true'"
name="Quantity"
id="quantity"
ng-disabled="submitted"
ng-model="selected"
class="form-control quantity-selector"
data-toggle="tooltip"
tooltip-top="true"
data-original-title="${Quantity}"
ng-options="item as item.label for item in items track by item.id">
</select>
</div>
</div>
</div>
Controller:
$scope.items = [{
id: 1,
label: '1'
}, {
id: 2,
label: '2'
}, {
id: 3,
label: '3'
}];
$scope.selected = $scope.items[0];
What it all looks like:
So I have selected "3" on the Performance PC Laptop but if you look at the console log on the right, you can see the value added is 1.
Picture to display value added to cart
Shame really, I was happy with the empty cell but its what the client would like, I know I can update the empty cell with some text but they would really like it to default to 1.
Any suggests and I would be grateful,
Bored Panda
Replacing the ng-if with ng-show resolved my problem, days lost trying to figure this out, also developed a simpler solution with number increment
Code Here:
<input type="number" value="1" min="1" max="20" step="1" ng-model="items_increment" title="Quantity" ng-show="item.u_show_quantity_button == 'true'"/>
$scope.items_increment = 1;
Hope it helps another person.
I am using angular 2 and I have two buttons I want toggle class between two buttons but. Below is my code
<button class="btn rounded" [ngClass]="{'btn-default': !clicked, 'btn-primary': clicked}" (click)="clicked = !clicked">
<i class="fa fa-long-arrow-up"></i>
</button>
<button class="btn rounded" [ngClass]="{'btn-default': !clicked, 'btn-primary': clicked}" (click)="clicked = !clicked">
<i class="fa fa-long-arrow-down"></i>
</button>
My problem is I want to toggle class but at time only one button can select and other condition is both buttons can be deselect. On click of one button other button should be deselect and once you click on selected button that button should be deselect and I want to do this only using buttons. Please help
You can use this pattern which will work for any number of buttons:
In your controller, set up an array of buttons and a selectedButton variable
buttons= [
{class: "fa fa-long-arrow-up", name: "button1"},
{class: "fa fa-long-arrow-down", name: "button2"},
]
selectedButton;
toggleSelect(button) {
if (button == this.selectedButton) {
this.selectedButton = undefined
} else {
this.selectedButton = button
}
}
Then in your template populate the selectedButton on click, and set your class based on whether it is selected
<button *ngFor="let button of buttons" class="btn rounded" [ngClass]="(selectedButton == button) ? 'btn-primary' : 'btn-default'" (click)="toggleSelect(button)">
<i [class]="button.class"></i>
</button>
This way you could have any number of buttons and only one will ever be "selected" at a time
working example: https://stackblitz.com/edit/angular-v9zlaz?file=src%2Fapp%2Fapp.component.html
I'm using an icon, which I display based on a condition using ng-class. I want to add ID's for both the HTML tags.
<i ng-show="ctrl.data.length > 1"
ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen,
'glyphicon glyphicon-chevron-up': ctrl.isOpen}">
</i>
In order to have a dynamic ID value, wrap it in {{}} so that Angular interprets that value.
<i ng-show="ctrl.data.length > 1" id="{{ctrl.isOpen ? 'chevron-up' : 'chevron-down'}}"
ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen,
'glyphicon glyphicon-chevron-up': ctrl.isOpen}">
</i>
How to add text beside the ionicons. I only see the ionicons but the text is unable to show.Iwant to show 'More' and 'Less' with the ionicons when user click on it.
Example, preset condition is ion-plus sign and 'More'. Click 'More', it will show ion-minus and 'Less'. Function wise is working. Only 'more and 'less' not shown.
Below is my code
<div ng-click="toggleon()" <i class="icon" ng-class="showMore ? 'ion-android-remove-circle assertive' : 'ion-android-add-circle positive'"></i><i class="padding" ng-class="showMore ? 'Less' : 'More'"></i></div>
</div>
ng-class is used to apply a CSS class to an element. It cannot be used to apply text. Use ng-bind instead. Also use <span> and not <i> for texts.
<div ng-click="toggleon()"> <i class="icon" ng-class="showMore ? 'ion-android-remove-circle assertive' : 'ion-android-add-circle positive'"></i><span class="padding" ng-bind="showMore ? 'Less' : 'More'"></span></div>
I added code to show the sort direction as well as color for selected column see the plunker
if sortable show up/down arrow: working
if Ascending show down arrow with active color: ACTIVE NOT APPLYING
if descending show up arrow with active color: working
Here is the code to application class conditionally:
<i class="fa fa-lg" [ngClass]="{'fa-sort' : column !== 'ProjectID',
' fa-sort-asc active' : (column === 'ProjectID' && !isDesc),
' fa-sort-desc active' : (column === 'ProjectID' && isDesc) }"
aria-hidden="true"></i>
See ASC and DESC both have active class which is working only with DESC true condition, please see the plunker for more detail.
Here the code after applying all conditions:
<i aria-hidden="true" class="fa fa-lg fa-sort"></i>
<i aria-hidden="true" class="fa fa-lg fa-sort-asc"></i> // active missing
<i aria-hidden="true" class="fa fa-lg fa-sort-desc active"></i>
Any Idea why it is behaving like this:
Conditions in ngClass are applied in order. When the condition in ngClass is evaluated to false, it removes corresponding classes. If the same class is in two conditions, it might be added at first but in the next condition, it will be removed.
Possible solutions would be:
change style classes to .active-asc, .active-desc {color: red;} and then apply them respectively in the conditions;
or
add new condition 'active' : column === 'columnName'