In Ionic , I am trying to write the same code using ionic list.
Below is my html template for the reference.
<ion-view>
<ion-content>
<ion-list class="product_father">
<ion-item class="back_style span_txt_color" ng-repeat="playorderslist in playorderslists">
<span class="span_txt_color"><b>REFERENCE:</b>
{{playorderslist.reference}} <span class="span_txt_color2" >
{{playorderslist.date_add}}</span> <br>
<br/>{{playorderslist.payment}}<br>
<span class="span_txt_color1" style="background-color:
{{playorderslist.order_state_color}}; width:100%">{{playorderslist.order_state}}</span><BR><br>
<b>TOTAL PRICE:</b>{{playorderslist.total_paid}}
// i want to put here my condition
<a class="bc_a_color" target="_blank" href="https://test.com/pdfinvoicemobile?id_order={{playorderslist.id_orders}}">PDF</a>
</ion-item>
</ion-list>
<div id="load_html" >
</div>
<div id="load_html_browse">
<div class="same_footer"></div>
</ion-content>
</ion-view>
Use condition statement like this
<a *ngIf="Yourcondition" class="bc_a_color" target="_blank" href="https://test.com/pdfinvoicemobile?id_order={{playorderslist.id_orders}}">PDF</a>
Related
I want to add an element outside of modal using Ionic2 like the image below.
The area surrounded by blue border is the element that I want to add.
The area surrounded by red border is the custom modal that I have created.
Custom Modal.html
<ion-header>
<ion-navbar class="select-header">
<ion-buttons left (click)="close()">
<button ion-button>
<img class="close" src="assets/images/close.png"/>
</button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="region-selection">
<div class="select-all">
<img class="selection not-selected" src="assets/images/region/check_none.png"/>
<span>{{title}}</span>
</div>
<div class="select-region">
<ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
<ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
<img class="selection not-selected" src="assets/images/region/check_none.png"/>
<span [innerHtml]="region"></span>
</ion-col>
</ion-row>
</div>
</ion-content>
Try placing all your items inside the ion-content and remove the ion-header to have a structure like this
<ion-content class="region-selection">
<div class="outside-element">
<!--element outside of modal-->
</div>
<!--This is your modal header wrapper-->
<div class="modal-header">
<ion-buttons left (click)="close()">
<button ion-button>
<img class="close" src="assets/images/close.png" />
</button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</div>
<!--This is your modal header wrapper-->
<div class="modal-content">
<div class="select-all">
<img class="selection not-selected" src="assets/images/region/check_none.png" />
<span>{{title}}</span>
</div>
<div class="select-region">
<ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
<ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
<img class="selection not-selected" src="assets/images/region/check_none.png" />
<span [innerHtml]="region"></span>
</ion-col>
</ion-row>
</div>
</div>
</ion-content>
Now you can use css to style and position the elements using the classes .outside-element , .modal-header , .modal-content
Also, make sure to set your background-color to transparent
When I try to dynamically add content in MODAL(overflow-scroll is set false), the page adds white space at the bottom of page and prevents me to scroll up to reach the top of "ion-content".
Can anyone help me?
My code:
<ion-modal-view>
<ion-header-bar>
....
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="fc in query.filterChoices">
...
</ion-item>
</ion-list>
<div class="row">
<div class="col col-20">
</div>
<div class="col col-60">
<button class="button button-stable button-block" ng-click="addFilterChoice();">
Add Filter
</button>
</div>
<div class="col col-40">
</div>
</div>
</ion-content>
I am getting issue while redirecting to ion-list template with approx. 700 items. There comes a delay of around 4-5 seconds which is decreasing performance.Below is my code. Can someone please suggest me the solution?
<ion-modal-view class="bgImg">
<ion-view>
<ion-header-bar class="bar-light">
<h1><img class="title-image titleImg" src="img/logoIB.png"/></h1>
<div class="buttons button-clear">
<button class="button button-clear" ng-click="refreshList()" style="margin-top:40px;"><i class="icon ion-refresh" style="font-size:30px;"></i></button>
</div>
</ion-header-bar>
<ion-content scroll="true" >
<div data-ng-repeat="(letter, authors) in sorted_users" class="alpha_list">
<ion-item class="item item-divider" id="index_{{letter}}">
{{letter}}
</ion-item>
<ion-item ng-repeat="author in authors" ng-click="getSelectedUser(author.user_id,author.passcode,author.gesturecode,author.username)">
{{author.last_name}} {{author.first_name}}
</ion-item>
</div>
</ion-content>
<ul class="alpha_sidebar">
<li ng-click="gotoList('index_{{letter}}')" ng-repeat="letter in alphabet">
{{letter}}
</li>
</ul>
</ion-view>
I'm creating a project using Ionic 1.3.2 and building to Android 5.1.1. The problem is after buiding the classes has-header and has-tabs-top are added into <ion-content> automatically and because this a space is beeing showing. I don't know why this happens and I don't know how to remove these classes or if there's another solution.
How could I solve this ?
View
<ion-view>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" ng-model="pesquisar" placeholder="O que procura ?">
</label>
</div>
<ion-content>
<ion-list>
<ion-item class="item item-thumbnail-left"
ng-repeat="empresa in empresas | filter:pesquisar"
ng-click="getEmpresa({{empresa.id}})" >
<img ng-src='{{empresa.imagem}}'>
<h2 class="customTitle">{{empresa.razaoSocial}}</h2>
<div style="margin-bottom:20px">
<ul>
<li ng-repeat="ce in empresa.categorias | filter:pesquisar"
class="customListInline customCategoriaEmpresa">{{ce.descricao}}</li>
</ul>
</div>
<div class="row row-bottom">
<div class="col col-25"><i class="icon ion-thumbsup icon-24px"></i></div>
<div class="col col-25"><i class="icon ion-chatbox icon-24px"></i></div>
<div class="col col-25">
<i class="icon ion-ios-telephone icon-24px"></i>
</div>
</div>
</ion-item>
<ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>
</ion-list>
</ion-content>
</ion-view>
As per #MikeT's comment, but i think you want:
<ion-content style="top:0px">
Add this attribute to your ion-content
hide-nav-bar="true"
I need a scrollable page with ion-slides directive. If i set scroll=true in ion-content the slider is not shown on the page. I'm running ionic 1.3.1 and using the new ion-slide directive. This is my code,
<ion-content class="padding" scroll="false">
<div class="list card">
<div class="item no-padding">
<img class="full-image" src="http://12.jpg">
</div>
<div class="item ">
<button class="button icon-left ion-android-navigate button-stable">Directions </button>
<button class="button icon-left ion-ios-telephone button-stable">Call </button>
<button class="button icon-left ion-android-share-alt button-stable">Share</button>
</div>
</div>
<div class="slide-wrapper1">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<img src="http://placehold.it/375x468/">
</ion-slide-page>
<ion-slide-page>
<img src="http://placehold.it/375x468/0000">
</ion-slide-page>
<ion-slide-page>
<img src="http://placehold.it/375x468/">
</ion-slide-page>
</ion-slides>
</div>
<h4>About </h4>
<div class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</ion-content>
what am i doing wrong, How do i get the ion-slides to work in a scrollable page?
Thanks for any help
How about wrapping the inside of your ion-slide-page with an ion-content like:
<div class="slide-wrapper1">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<ion-content has-header="true" padding="true">
<img src="http://placehold.it/375x468/">
</ion-content>
</ion-slide-page>
</ion-slides>
</div>
I would like to note that this should work with Android. I think I had to remove the ion-content for iOS to work on the device.
*Edit - Also, my outside ion-content is set to true