Change icon by selecting icon from list - javascript

Brief Explanation:
I have placed 1 icon on home.html and I have some a list of icons as well. I just want to replace the icon with the icon I choose from the list. Below is my home.html code
<ion-item>
<!--Replace below icon by selecting icon from below ion-list -->
<i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
</ion-item>
<ion-list>
<ion-item>
<i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
</ion-item>
<ion-item>
<i class="fa fa-battery-1"></i> Battery Level 1
</ion-item>
<ion-item>
<i class="fa fa-battery-2"></i> Battery Level 2
</ion-item>
<ion-item>
<i class="fa fa-battery-3"></i> Battery Level 3
</ion-item>
<ion-item>
<i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
</ion-item>
</ion-list>
I have to use DOM sanitizer for some HTML dynamic operations, it will be ok if this needs JS/jQuery way on home.ts side.

Component Side :
battery_level = 'empty'
Template Side :
<ion-item>
<i class="fa fa-battery-{{battery_level}}"
[ngStyle]="{'color': battery_level=='empty' ? 'red' : battery_level=='4' ? 'green' : 'black' }"
></i> Battery Level {{battery_level}}
</ion-item>
<ion-list>
<ion-item (click)='battery_level = "empty"'>
<i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
</ion-item>
<ion-item (click)='battery_level = "1"'>
<i class="fa fa-battery-1"></i> Battery Level 1
</ion-item>
<ion-item (click)='battery_level = "2"'>
<i class="fa fa-battery-2"></i> Battery Level 2
</ion-item>
<ion-item (click)='battery_level = "3"'>
<i class="fa fa-battery-3"></i> Battery Level 3
</ion-item>
<ion-item (click)='battery_level = "4"'>
<i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
</ion-item>
</ion-list>
WORKING DEMO

Related

Input elements not scrolling

Ionic 2 input elements not scrolling to top when keyboard is shown. I have tried everything that i could find on google. making sure keyboard disable scroll is not true. But still couldn't figure it out what makes the scroll not working.
Any advice would be helpful. Thank you.
Code:
<ion-header>
<ion-navbar color="header">
<ion-title>Billing Info</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list style="padding: 10px 15% 10px 15%">
<ion-item *ngFor="let item of cart.Food">
{{item.Food}}
<div item-right>₹ {{item.Qty*item.Price}}</div>
</ion-item>
</ion-list>
<ion-item (click)="toggleGroup(i)" style="padding: 10px 15% 10px 15%; font-size: large">
Net Total
<div item-right>₹ 150
<ion-icon color="success" [name]="isGroupShown(i) ? 'arrow-dropdown' : 'arrow-dropright'"></ion-icon>
</div>
</ion-item>
<ion-list *ngIf="isGroupShown(i)" style="padding: 10px 15% 10px 15%" [ngClass]="{active: isGroupShown(i)}">
<ion-item>
Bill Amount
<div item-right>₹ 150</div>
</ion-item>
...
</ion-list>
<ion-item style="padding: 10px 15% 10px 15%">
<ion-label>Discounts</ion-label>
<ion-checkbox item-right color="secondary" [(ngModel)]="discount" checked="false"></ion-checkbox>
</ion-item>
<ion-grid style="padding: 10px 15% 10px 15%; background-color: #f0e68c" radio-group [(ngModel)]="type">
<ion-row>
<ion-col col-6>
<ion-item>
<ion-label>Percentage</ion-label>
<ion-radio value="percentage" checked item-right></ion-radio>
</ion-item>
</ion-col>
<ion-col col-6>
<ion-item>
<ion-label>Amount</ion-label>
<ion-radio value="amount"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<ion-list>
<ion-item>
<ion-label floating>Unit</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Reason</ion-label>
<ion-textarea rows="5"></ion-textarea>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<button ion-button>Apply</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer text-center>
<ion-toolbar position="bottom">
<button ion-button color="cart" round large outline>BILL</button>
</ion-toolbar>
</ion-footer>
Screenshot:
There is a topic for this kind of issue on ionic forum. Did You read it?
There are workarounds like those:
Using a regular <input type="text"> instead of <ion-input type="text">
Using some custom directive to make element "attached" to keyboard: https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754

ionic filter not working on my apk

i made a filter for my ionic app that work very well on google chrome (whit the ionic serve) but when i build my apk it doesnt do anything what could be the problem?
this is the search code
<ion-content class="fondo has-subheader">
<div class="bar subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<input type="search" ng-model="busqueda" placeholder="Buscar">
</label>
</div>
<ion-list>
<ion-item class="button button-icon center" ng-repeat="cate in categorias | filter: busqueda" type="item-text-wrap" href="#/tab/categoria/{{cate.id}}" >
<img class="img_cat" ng-src="{{cate.imagen}}" >
<h2 class="categoria_n">{{cate.nombre}}</h2>
</ion-item>
</ion-list>
</ion-content>
<ion-content class="fondo has-subheader">
<div class="bar subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<input type="text" ng-model="search" placeholder="Buscar">
</label>
</div>
<ion-list>
<ion-item class="button button-icon center" ng-repeat="cate in categorias | filter : search" type="item-text-wrap" href="#/tab/categoria/{{cate.id}}" >
<img class="img_cat" ng-src="{{cate.imagen}}" >
<h2 class="categoria_n">{{cate.nombre}}</h2>
</ion-item>
</ion-list>
</ion-content>
And try ui-sref in replace of href="#/tab/categoria/{{cate.id}}"

overwrite ion-nav-bar with ion-header-bar in one page

i am tryng to show ion items with ion header bar having default ion nav bar.
The problem is, i want ionic bar header in one page rather than ionic nav bar. i tried with below but no luck.
Below from index.html
<ion-nav-bar class="bar-light bar-positive">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
Below from one page:
<ion-view title="items" id="page15" >
<ion-content ng-controller="itemsCtrl" class="has-header" hide-nav-bar="true">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete"></button>
</div>
items
<div class="buttons">
<button class="button button-icon icon ion-log-out" ng-click="test()">
</button>
</div>
</ion-header-bar>
<ion-list show-delete="data.showDelete" >
<ion-item ng-repeat="item in items"
item="item"
class="item-remove-animate">
{{ item.name }}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(item)">
</ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
<div class="float-button" ng-click="additem()">
<span class="height-fix">
<a class="content">
<i class="ion-ios-plus-empty"> </i>
</a>
</span>
</div>
</ion-view>
The output is coming as below
i dont want the default ion nav bar n that page and want only ionic header bar.
I got it finally. Just add nav bar buttons instead of ionic header bar.

Ionic/angular switching from sideview to tabview

im currently using ionics sliding sideview for my navigation in my app but i want to switch to the new tabs. I have changed the code to make the tabs but $state.go doesn't seem to work any more. Here was the code for the old sliding navigation :
<ion-side-menus>
<ion-pane ion-side-menu-content="">
<ion-nav-bar class="bar-balanced nav-title-slide-ios7">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<ion-side-menu side="left" class="main-menu">
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true" ng-controller="SplashCtrl">
<ion-list>
<ion-item class="heading-item item item-avatar" nav-clear="" menu-close="" ui-sref="app.profile">
<div class="user-image-container">
<pre-img ratio="_1_1" helper-class="rounded-image">
<img class="user-image" ng-src="img/logo.jpg" spinner-on-load="">
</pre-img>
</div>
<h2 class="greeting">{{welcomename}}</h2>
<p class="message">Welcome back</p>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.google" ng-click="googleLoginClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">My Diary</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.history" ng-click="historyClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Search</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.tasklist" ng-click="tasklistClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Task List</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.myforms" ng-click="myFormsClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Unsent Instructions ({{unsentFormsCount}})</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.banking" ng-click="bankingClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Banking</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ng-click="logoutClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Logout</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
The "XXclick" functions in the ng-clicks just call $stat.go's. Here is the new navigation :
(ive just added the top one to reduce the code )
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-content has-header="true" ng-controller="SplashCtrl">
<ion-tab title="Diary" icon-off="ion-ios-calendar-outline" icon-on="ion-ios-calendar" ui-sref="utab.google" ng-click="googleLoginClick()">
<ion-nav-view name="diary"></ion-nav-view>
</ion-tab>
</ion-content>
</ion-tabs>
Appreciate any help.
First no need to use ion-content in tab. There should be issue in routing also. Can you update full code or create code pen? so I can help you. I think below code pen link will help you.
'http://codepen.io/nirmal25/pen/BzQxzX'

ionic: logout button stop working after twitter popup

I have twitter share button in my app.
After sharing with twitter (popup appears) or even cancel, one of my buttons -- logout button stop working.
Buttons are very simple:
<ion-item ng-click="vm.gotoMyRewards()" class="item">
<span class="item-icon"><i class="fa fa-shopping-cart"></i></span>
<span class="item-text ng-binding">My Rewards</span>
</ion-item>
<ion-item ng-click="vm.gotoMyPoints()" class="item">
<span class="item-icon"><i class="icon ion-stats-bars"></i></span>
<span class="item-text ng-binding">My Points</span>
</ion-item>
<ion-item ng-click="vm.gotoPartnerCenter()" ng-show="vm.user.IsMerchant" class="item ng-hide" style="">
<span class="item-icon"><i class="fa fa-shopping-cart"></i></span>
<span class="item-text ng-binding">Partner Centre</span>
</ion-item>
<ion-item ng-click="vm.gotoSettings()" class="item">
<span class="item-icon"><i class="fa fa-cog"></i></span>
<span class="item-text ng-binding">Settings</span>
</ion-item>
<!-- ngIf: vm.user.BugReportEnabled -->
<ion-item menu-close="" ng-click="vm.takeUserGuide()" class="item">
<span class="item-icon"><i class="icon ion-easel"></i></span>
<span class="item-text ng-binding">About</span>
</ion-item>
<ion-item menu-close="" ng-click="vm.openFAQ()" class="item">
<span class="item-icon"><i class="fa fa-life-ring"></i></span>
<span class="item-text ng-binding">Help</span>
</ion-item>
<ion-item ng-click="vm.signOut()" class="item">
<span class="item-icon"><i class="fa fa-power-off"></i></span>
<span class="item-text ng-binding">Log Out</span>
</ion-item>
The last one is not working. And action behind not triggered:
vm.signOut = function () {
var confirmCallback = function(index){
//OK
if(index == 2){
appStateFactory.logOut();
}
};
messageService.confirm("Sign_out_confirm_message", [translate.get('Cancel_MA'), 'OK'], confirmCallback);
};

Categories