i've this code and a little problem working with Ionic and AngularJS.
$scope.changeArrow = function(){
if($scope.down == false){
$scope.down = true;
}else{
$scope.down = false;
}
};
<ion-item ng-repeat="beac in disp" class="item-icon-right" ng-click="changeArrow()">
<b>{{choosen.network}} - {{beac.minor}}</b> • {{beac.viewed}} / {{beac.conf}}
<i class="icon ion-arrow-right-b" ng-show="down"></i>
<i class="icon ion-arrow-down-b" ng-show="!down"></i>
Results:
After click -->>
After click, will be the first image.
The problem is that i need to change the arrow only in the selected item, not in all of them. I have no idea how can I do it with Ionic. Any 'special' method?
Thanks
<ion-item ng-repeat="beac in disp" class="item-icon-right" ng-click="selectedItem=beak">
<b>{{choosen.network}} - {{beac.minor}}</b> • {{beac.viewed}} / {{beac.conf}}
<i class="icon ion-arrow-right-b" ng-show="selectedItem!=beak"></i>
<i class="icon ion-arrow-down-b" ng-show="selectedItem==beak"></i>
Or even like this:
<ion-item ng-repeat="beac in disp" class="item-icon-right" ng-click="selectedItem=beak">
<b>{{choosen.network}} - {{beac.minor}}</b> • {{beac.viewed}} / {{beac.conf}}
<i class="icon" ng-class="{'ion-arrow-down-b': beak==selectedItem, 'ion-arrow-right-b': beak!=selectedItem}"></i>
Hope this helps.
$scope.changeArrow = function(index){
$scope.down = index;
};
and then ng-click="changeArrow($index)"
and then ng-show="down === $index"
Your changeArrow function is probably toggling the down variable which in turn change the arrows for all the items. You can pass the item index to this function to control which arrow will be facing down.
Controller
$scope.selectedItemIndex = -1;
$scope.changeArrow(index) {
$scope.selectedItemIndex = index;
}
Template
<ion-item ng-repeat="beac in disp" class="item-icon-right" ng-click="changeArrow($index)">
<b>{{choosen.network}} - {{beac.minor}}</b> • {{beac.viewed}} / {{beac.conf}}
<i class="icon ion-arrow-right-b" ng-show="$index === selectedItemIndex"></i>
<i class="icon ion-arrow-down-b" ng-show="$index !== selectedItemIndex"></i>
Related
I'm having some issues trying to print the typical star-rating widget in my page using angular. Probably there will be an easier way to show them using css but for now i wanted to do it by code.
<i *ngFor="let star of this.stars" [ngClass]="{
'score__star fas fa-star': star === 'full',
'score__star fas fa-star-half-alt': star === 'half',
'score__star far fa-star': star === 'empty'
}"></i>
this is the code of the widget and this is the content of the array of stars:
(5) ["full", "full", "half", "empty", "empty"]
i'm not sure why, chrome draws properly the first 2 but not the others. From what i have seen in the debugger there are parts of the class that are missed...
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class=""></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class=""></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class="fas fa-star-half-alt"></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class="score__star far fa-star"></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class="score__star far fa-star"></i>
Any idea of what i'm missing? I also tried to mix class and ngClass to split the common part of the style but i had the same problem.
Thanks a lot!
I see one workaround for this problem.
Could you change your classes, e.g:
getClasses(star) {
return {
'full' : star === 'full',
'half' : star === 'half',
'empty' : star === 'empty'
}}
Also I'm not sure If you know this but you can pass method to ngClass directive
<i *ngFor="let star of stars" [ngClass]="getClasses(star)">
{{star}}
</i>
How can I toggle background color on multiple buttons.( reference images )
I have set of buttons. Once user click on any button it change the background color and if click again on same button other button the first clicked button reset to original color and change the 2nd click button.
code
<span class="input-group-btn">
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectToday('approved')"
>
Select Today
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectWeek('approved')"
>
To Current Week
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectMonth('approved')"
>
To Current Month
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="AllTime('approved')"
>
All Time
</button>
</span>
Can anyone give me clue how to bind the class with each other
image
You can make it dynamic like this:
Working Demo
TS:
selected = null
buttons = ["Selecct Today", "Current Week", "Current Week", "All Time"];
Template:
<ng-container *ngFor="let btn of buttons;let i=index">
<button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = null:selected = i">
{{btn}}
</button>
</ng-container>
To change the color of next button on deselection of already selected btn, try this:
<ng-container *ngFor="let btn of buttons;let i=index">
<button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = i + 1:selected = i">
{{btn}}
</button>
</ng-container>
You can use radio button and customize it's display style instead of using Button directly. I am sure i will solve your problem. Just refer to this link:
Convert Radio button to Button
Give an index or id to each button and give the index on click
(click)="enableDisableRule(2)"
in your ts, save the index:
enableDisableRule(selectedIndex:number){
...
if(this.selectedIndex = selectedIndex){
this.selectedIndex = null;
} else{
this.selectedIndex = selectedIndex;
}
}
And in your html, update you button acording to selectedIndex:
[style.background-color]="selectedIndex === 2 ? 'green' : 'red'"
Or something in this spirit.
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()
I am struggling on adding and removing a style class on a anchor tag. I want to add a active class when I clicked on that tag and remove active from last active one. By default Home page would be active. I have tried many things but no success on that!
I have added few code but it is not working. Below is the code:
angularjs code:
$scope.isActive = false;
$scope.getCSSClass = function () {
return 'active';
}
<div id="mySidenav" class="sidenav">
<span class="whitelogo"><img src="styles/images/logo-small.png" alt="logo"></span>
<div class='clearfix'></div>
×
<a ng-link="['/Home/']" title="Home" class="active"><i class="fas fa-home"></i>Home</a>
<a ng-link="['/TestForm/']" ng-class="getCSSClass()" title="Application Form"><i class="fas fa-user-edit"></i> test Form</a>
</div>
Any help will be appreciated. Thanks in advance!
On Angularjs file, I have added this code:
$scope.getStyleClass = function (path) {
var cur_path = $location.path().substr(0, path.length);
if (cur_path == path) {
if ($location.path().substr(0).length > 1 && path.length == 1)
return "";
else
return "active";
} else {
return "";
}
}
And on Html side:
ng-class="getStyleClass('/TestForm')"
I get stuck in this case:
I create a list of records in html:
{{#each data}}
<i class="fa fa-fw fa-pencil-square-o btn-edit-ota" data-hotel-id="1"></i>
<i class="fa fa-fw fa-pencil-square-o btn-edit-ota" data-hotel-id="2"></i>
...
<i class="fa fa-fw fa-pencil-square-o btn-edit-ota" data-hotel-id="10"></i>
{{/each}}
I want to everytime I click on each item, it writes "hotel-id" of that item in console log; So, in js I create:
'click .btn-edit-ota': function (event, template) {
var hid = $(event.target).data('hotel-id');
console.log(hid);
}
And it works fine, it shows '1' in the console log when I click the 1st and so on '2' with 2nd, ...
In js, I have an autorun:
Template.myTemp.onRendered(function () {
var self = this;
self.autorun(function (computation) {
... //generate my list here...
}
});
so whenever I change any checkboxs or filters or current page..., the autorun will run and I get a new list.
The problem here is when that autorun runs, and I get a new list.
e.g: now is:
<i class="fa fa-fw fa-pencil-square-o btn-edit-ota" data-hotel-id="11"></i>
<i class="fa fa-fw fa-pencil-square-o btn-edit-ota" data-hotel-id="12"></i>
...
<i class="fa fa-fw fa-pencil-square-o btn-edit-ota" data-hotel-id="20"></i>
I click in the 1st, It shows '1' in console log. :((
It should show '11'. Because the HTML now is: ...data-hotel-id="11">, not ...data-hotel-id="1"> any more.
It must be use the old data/html I think.
Something weirds happened with that 'click' event
$(event.target).data('hotel-id');
It doesnt get a new ID.
Anyone can tell me why this happened?
Many thanks.