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);
};
Related
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
I have to remove the product from the list. My product is removed properly but after I click on the cancel icon, the model closes. I am using AngularJS.
/**
* #Summary: removeSelectedProductFromAlbum function, remove the productKey from the album
* #param: event, index, productObject
* #return: NA
* #Description:
*/
$scope.albumKey = [];
$scope.albumObject = [];
$scope.setAlbumObject = [];
$scope.removeSelectedProductFromAlbum = function(event, index, productObject) {
//GET THE ALBUM OBJECT FROM THE SCOPE
$scope.setAlbumObject = $scope.setAlbumObject;
//PROCESS TO REMOVE productKeyId IN ALBUM.
var productKeyId = productObject.keyId;
if(productKeyId != undefined) {
if($scope.productsKeyIdList != undefined && $scope.productsKeyIdList != null) {
var index = $scope.productsKeyIdList.indexOf(productKeyId);
$scope.productsKeyIdList.splice(index, 1);
updatedProductKeyArray = $scope.productsKeyIdList;
//Calling updateArray inner function for update sharedBuyerKeyIdList after remove the keyId
updateArray();
}
}
}
//CALLING THE updateArray FUNCTION FOR UPDATE THE PRODUCT AFTER DELETING THE DATA
function updateArray () {
var PRODUCT_DB_REF = firebase.database().ref('datastore/productsAlbum');
// Updating product key in album.
PRODUCT_DB_REF.child($scope.setAlbumObject.key).update({
productKey : updatedProductKeyArray
});
CMN.showNotification("top","center","info","Product is Successfully Removed");
//$(event.currentTarget).parents("#hideAfterRemove").hide("slow");
}
<div style="overflow:auto; max-height:300px;" >
<div class="dashboard-prod-wrap decorCardD2"
style="width:342px;" ng-repeat="sellerAlbum in sellerSelAlbumProducts" ng-if="sellerSelAlbumProducts.length > 0">
<i class="fa fa-remove" style="font-size:14px; cursor:pointer;" title="Remove"
ng-click="removeSelectedProductFromAlbum($event, $index, sellerAlbum)">
</i>
<div class="w3-row w3-padding-top ng-cloak">
<span class="pull-left color-d4 text-capitalize no-wrap dash-prod-name w3-small ng-cloak">
<span class="product-name" style='padding-right:3px;'>
{{sellerAlbum.categoriesDto.categoryName}}
</span>
<span class="w3-text-teal ng-cloak">
<b>{{sellerAlbum.sellerProductDesignsDtos[0].designsName}}</b>
</span>
<span class="w3-text-teal ng-cloak" ng-if="sellerAlbum.designNumber != 'undefined'">
-<b>{{sellerAlbum.designNumber}}</b>
</span>
<small class="text-muted w3-left w3-price-tag ng-cloak">
<div class='list-icon-f'>
<i class="fa fa-inr" aria-hidden="true"></i>
</div>
<span ng-if="!sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
{{sellerAlbum.fixedPrice}}
</span>
<span ng-if="sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
<strike class="w3-text-red">{{sellerAlbum.fixedPrice}}</strike>
<span class="w3-text-green">
{{sellerAlbum.offerPrice}}
</span>
</span>
</small>
<small class="text-muted w3-left w3-price-tag ng-cloak" ng-if="sellerAlbum.fixedPrice == 0">
<div class='list-icon-f'>
<i class="fa fa-inr" aria-hidden="true"></i>
</div>
<span ng-if="!sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
{{sellerAlbum.maxPrice}}
</span>
<span ng-if="sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
<strike class="w3-text-red">{{sellerAlbum.maxPrice}}</strike>
<strong class="w3-text-green">
{{sellerAlbum.offerPrice}}
</strong>
</span>
<small class="w3-small"> (<i class="fa fa-inr"></i>{{sellerAlbum.minPrice}}
- <i class="fa fa-inr"></i>{{sellerAlbum.maxPrice}})
</small>
</small>
</span>
<div class="pull-right ng-cloak" style="width:100%;margin-top:10px;">
<div class='owner-img'>
<img src="{{sellerAlbum.sellerDto.userTypeDto.imageURL != 'null' ? sellerAlbum.sellerDto.userTypeDto.imageURL : '/static/assets/img/image_placeholder.jpg'}}"
alt="Avatar" class="w3-right w3-circle w3-margin-left">
</div>
<small class="text-uppercase w3-tiny text-muted text-right ng-cloak">
<b>{{sellerAlbum.sellerDto.personName}}</b>
<span ng-repeat="address in sellerAlbum.sellerDto.userTypeDto.userTypeAddressDtos"
ng-if="address.keyId === sellerAlbum.sellerDto.userTypeDto.defaultAddressKeyId">
- <b>{{address.city}}</b>
</span><br>
</small>
</div>
</div>
<hr class="w3-clear margin0">
<div class="w3-row-padding w3-padding-top" style="margin: 0 -16px">
<!-- START:This will display Large Product Image -->
<div class="dashboard-prod-col-left w3-center">
<div class="text-center w3-padding-8"
ng-init="setImageURLList[sellerAlbum.keyId] = sellerAlbum.sellerProductSetDto[0].setImageURLList">
<div ng-repeat="image in setImageURLList[sellerAlbum.keyId]"
ng-click="sellerAlbum.defaultImageURL = image.imageURL"
onClick="imgShadowArr(this);"
ng-init="sellerAlbum.defaultImageURL = setImageURLList[sellerAlbum.keyId][0].imageURL"
class="dashboard-prod-img-wrap {{sellerAlbum.defaultImageURL == image.imageURL ? 'w3-border-teal-orange' : ''}}">
<img src="{{image.imageURL}}" class="prod-img-xs cursor-pointer">
</div>
<div class="dashboard-prod-img-wrap"
ng-if="productImgsList[sellerAlbum.keyId].length < 1">
<img src="/static/assets/img/product_default.jpg"
class="prod-img-xs">
</div>
</div>
</div>
<!-- END:This will display Large Product Image -->
<div class="dashboard-prod-col-right w3-center hover-div">
<img src="{{sellerAlbum.sellerProductSetDto[0].setImageURLList[0].imageURL != null ? sellerAlbum.sellerProductSetDto[0].setImageURLList[0].imageURL :'/static/assets/img/product_default.jpg'}}"
class="cursor-pointer" style="max-height:200px;border:1px solid black;">
<br>
</div>
</div>
<div class="">
<div class="text-center pull-left ng-cloak list-by-a list-by-color">
<div class='list-icon'>
<i class="fa fa-th-large" aria-hidden="true"></i>
</div>
<ul class='margin0'>
<li class="prodColorWrap" ng-repeat="productSet in sellerAlbum.sellerProductSetDto track by $index"
style="cursor:pointer; background-color:{{productSet.colorCode}}"
ng-click="setImageURLList[productSet.keyId] = sellerAlbum.setImageURLList;
productSet.defaultImageURL = setImageURLList[productSet.keyId][0].imageURL">
</li>
</ul>
</div>
<div class='w3-offer-tag' ng-if="sellerAlbum.inOffer">
<label>
<i class="fa fa-star w3-spin"></i>
Offer
</label>
</div>
</div>
<br>
</div>
function for remove icon , please sir how to fix this issue?
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}}"
This is my HTML code:
<ion-view view-title="Food Log - {{date | date:'dd/MM/yyyy'}}" ng-controller="FoodLogCtrl">
<div id="foodlog_calorie_progress">
<div>6300</div>
<div>3100</div>
</div>
<div id="foodlog_calorie_text">
<div>
consumed
</div>
<div>
remaining
</div>
</div>
<div id="foodlog_entry_buttons">
<button type="button" ng-click="takePicture()">
<span class="ion-camera"></span>
Capture
</button>
<button>
<span class="ion-images"></span>
Gallery
</button>
</div>
<img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" height="200px" />
<div id="foodlog_overview" class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-pizza"></i>
Last meal time
<span class="item-note">
1:16 pm
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-steam"></i>
Last meal added
<span class="item-note">
Chicken Roll
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-medkit"></i>
Last calorie intake
<span class="item-note">
50g
</span>
</a>
</div>
</ion-view>
This is the controller:
.controller("FoodLogCtrl", function ($scope, $cordovaCamera, $cordovaFile) {
$scope.menuTabShowHide(false);
$scope.images = [];
$scope.takePicture = function () {
alert("asdf");
}
$scope.urlForImage = function(imageName) {
...
}
})
For some reason, the takePicture function just won't run. Writing $scope.takePicture() right after it runs fine, though.
I got your code working here. See if you find something different.
http://codepen.io/anon/pen/yJWxWY
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<ion-view view-title="Food Log - {{date | date:'dd/MM/yyyy'}}" ng-controller="FoodLogCtrl">
<div id="foodlog_calorie_progress">
<div>6300</div>
<div>3100</div>
</div>
<div id="foodlog_calorie_text">
<div>
consumed
</div>
<div>
remaining
</div>
</div>
<div id="foodlog_entry_buttons">
<button type="button" ng-click="takePicture()">
<span class="ion-camera"></span>
Capture
</button>
<button>
<span class="ion-images"></span>
Gallery
</button>
</div>
<img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" height="200px" />
<div id="foodlog_overview" class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-pizza"></i>
Last meal time
<span class="item-note">
1:16 pm
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-steam"></i>
Last meal added
<span class="item-note">
Chicken Roll
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-medkit"></i>
Last calorie intake
<span class="item-note">
50g
</span>
</a>
</div>
</ion-view>
</html>
and JS
angular.module('ionicApp', ['ionic'])
.controller('FoodLogCtrl', function($scope) {
$scope.takePicture = function () {
alert("take pic");
}
});
If you still cannot trigger the click event, there could be CSS issue and some other element could have been overlaying on the button element :Just a thought
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'