I'm using ionic and angularJS in my application, I need to expand and collapse list view. As of now I created the list view using ion-list and ion-item without expand and collapse. Please find the code and snap below.
<ion-view view-title="Call Lists">
<ion-content class="padding">
<ion-list show-delete="false" can-swipe="true">
<div class="list card-ScheduledCalls">
<!-- Task # -->
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="item in callItems" type="item-text-wrap" ng-click="doTask()">
<img ng-src="{{item.imgSrc}}">
<h3>{{item.callCount}}</h3>
<h3>{{item.callDate}}</h3>
<p style="color:white;">{{item.callCmt}}</p>
<p style="color:white;">{{item.callType}}</p>
<p style="color:white;">{{item.assetType}}</p>
<p style="color:white;">{{item.requestedBy}}</p>
<p style="color:white;">{{item.issueType}}</p>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
Now I have more details in the each list for eg: EmpName, BloodGroup, EmpTodayTaskName, TaskTime, TaskDuration, TaskComments, etc. First I will show only three fields in the list, If a user clicks the more button (mentioned in the image) I will show remaining details.
At the same time, I'm having tapping (ng-click) functionality to go next page so I restrict the user that If they select the more button only to do expand and collapse other touches it will move into next page.
How can I handle this activity in ionic and angular ?
If I understand this correctly, the app needs to go to the next page if the content inside of the ion-item is clicked. If so, why not to wrap ion-item content inside some container, for example div, and attach the required ng-click there
Related
I have ion-item, with ion-checkbox and ion-labels elements inside, and an a element inside ion-label:
<ion-item class="userAgreement" text-wrap no-border no-lines>
<ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
<ion-label>I accept the terms of
<a (click)="GoToUserAgreementPage()" class="linkText">User
Agreement</a>
</ion-label>
</ion-item>
Checkbox is clickable itself, but when I click on User agreement text inside ion-label, whole ion-item is clicked and it affects checkbox. I want checkbox to be clickable only if clicked on itself, and be able to click only on that part of text inside a element inside ion-label.
If you take a look at the Ionic docs that's actually how a checkbox with a label wrapped in an ion-item works.
To get the behaviour you want, don't wrap your checkbox and label in an ion-item, but instead recreate the look of an ion-item. Therefore you could use display: flex or a grid.
Raw draft using display: flex and some inline styles looks something like this:
<div style="align-items: center; display: flex">
<ion-checkbox style="padding-right: 10px" formControlName="agreementCheckbox"></ion-checkbox>
<ion-label>I accept the terms of
<a (click)="GoToUserAgreementPage()" class="linkText">User Agreement</a>
</ion-label>
</div>
Just wrap the ion checkbox with an ion-item. In my case I don't want any label but if you want just use for.
<ion-item class="userAgreement" text-wrap no-border no-lines>
<ion-item>
<ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
</ion-item>
<ion-label>I accept the terms of
<a (click)="GoToUserAgreementPage()" class="linkText">User
Agreement</a>
</ion-label>
</ion-item>
Try wrapping the ion-checkbox within another ion-item. It appears to me the parent ion-item will not propagate click events to any controls inside child ion-items.
Clicking on the child ion-item will toggle the checkbox as expected.
<ion-item class="userAgreement" text-wrap no-border no-lines>
<ion-item>
<ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
</ion-item>
<ion-label>I accept the terms of
<a (click)="GoToUserAgreementPage()" class="linkText">User Agreement</a>
</ion-label>
</ion-item>
I use ionic for my mobile app. I have a Directory with a list of employees. It works fine except that the last employee name gets cut or is not visible.
I use collections-repeat inside ion-scroll. Above this I filter directive. The filter directive should not be scrollable.
I tried setting bottom:50px for the last item in the list, it brings up the last item, but writes over the item above it.
Any suggestions on how to fi this would be break
<ion-content scroll="false">
<filters on-query-change="onQueryChange()" class="filter-directive"></filters>
<hr class="hline">
<ion-scroll class="scroll-length">
<div
collection-repeat="contact in contacts track by contact.id"
item-width="100%"
item-height="getHeight(contact)"
ng-show="(contact.fullName || contact.isDivider)>
<div id="company-directory-item-divider"
class="item item-divider fw-semibold dark"
ng-if="contact.isDivider">
{{contact.letter}}
</div>
<div
class="item item-icon-right tn-nav-item"
ng-click="gotoEmployeeInfo(contact)"
ng-if="contact.fullName">
<span ng-bind-html="contact.fullName"></span>
<div class="tn-nav-item-subtitle dark"> {{contact.workShortLocDesc}}</div>
<i class="icon ion-ios-arrow-forward"></i>
</div>
</div>
<ion-scroll>
</ion-content>
Looks like the div with collection repeat should be the first element inside ion-content for this to work:
So this is how I finally fixed it:
Got rid of ion-scoll
made ion-content scrollable
Put the filter directive and hline between ion-header and ion-content and set it to position absolute (along with some margin top styling)
styled ion-content with margin-top to bring it lower (so as not to write over the filter)
This worked.
I created a multi-button screen much like this:
When I click on a button it would have an id and that id I get on its route, I did with list already, but several buttons passing parameter I still can not.
My question is how to pass that button id to another screen.
Avisos.html
<ion-view view-title="Avisos">
<ion-content style="background-color: #FF4500; background-size: cover;
background-position: center;">
<div class="row icon-row">
<div class="col text-center">
<button class="botao button button-positive" id="1">Icon</button>
<br>mais informaçoes
</div>
<div class="col text-center">
<button class="botao button button-positive" id="2">Icon</button>
<br>Avisos
</div>
<div class="col text-center ">
<button class="botao button button-positive" id="3">Icon</button>
<br>Contato
</div>
</div>
</ion-content>
</ion-view>
In that part is where I get the id, How can I get in that part the id of the chosen button? And pass it on side.id?
site.html
<ion-view view-title="Site">
<ion-content>
<ion-list>
<ion-item ng-repeat="site in sites" href="#/app/conteudoDoSite/{{site.id}}">
<span ng-bind-html="site.title"></span><span class="badge badge-assertive">{{site.post_count}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
How to pass parameter to another screen with ionic1 and angular1? Can anybody help me? What I am trying to do is that when the user clicks one of these buttons the id is passed.
I would recommend using ui-sref instead of href in this situation as it allows you to use states instead of paths and also allows you to pass variables to the next view. Here is an example:
<ion-item ng-repeat="site in sites" href="app.conteudoDoSite({id: site.id})">
You also need to make sure that the state you are trying to pass the variable to is configured to receive parameters. Which would look something like this:
.state('app.conteudoDoSite', {
url: '/conteudoDoSite/:id',
templateUrl: '/* Fill in */',
controller: '/* Fill in */'
})
I attempted to guess the state by looking at your code, but please make sure that it is correct, before copying the examples.
I didn't explain what i wanted to achieve very well so i will try again.
I have a search bar and a last viewed list in my main view, what i am trying to do is hide the last viewed list when the user starts typing in the search bar and unhide it when the search bar is empty.
With the current code i am using it displays the last viewed list at first and hides when the user starts typing however it is never unhidden when the search box is cleared.
I have included the whole view now and the search i am using is still the same as the two lines below.
I have since determined that when the user clears the search box the query no longer equals {}, which shows the last viewed list, but it equals {$: ""} which hides it.
I am trying to use ng-if to hide and unhide parts of the DOM, however when ng-if is triggered it never returns to true and doesn't recreate the DOM.
<ion-view view-title="GE Office Finder">
<!-- Favourites button -->
<ion-nav-buttons side="right">
<button class="button icon ion-android-star" ui-sref="Favourites">
</button>
</ion-nav-buttons>
<!-- Search function starts here -->
<ion-header-bar class="bar-subheader">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" id="search-criteria" placeholder="City, Country or Office Name" ng-model="query[queryBy]">
</label>
</ion-header-bar>
<!-- Search function ends here -->
<ion-content has-subheader>
<!-- Main content starts here -->
<!-- ng-show hides the list of offices and displays them when the user starts searching -->
<ion-list ng-if="query[queryBy]">
<!-- Creates each item through collection-repeat and is filtered by the query linked to the search field -->
<!-- ng-click opens the modal that will have the enlarged office address and the map of the office -->
<ion-item class="item-text-wrap item-icon-right" id="output" collection-repeat="office in offices|filter:query" ng-controller="ModalCtrl" ng-click="openModal(office.Lat, office.Long); lastview(office.id);">
<!-- Outputs all the data from offices.json -->
<h3 id="LocName">{{office.LocationName}}</h3>
<!-- the span prevents null data from being output causing empty space to be displayed -->
<p id="details"><span ng-if="office.LocAddressLine1">{{office.LocAddressLine1}}</span><span ng-if="office.LocAddressLine2">, {{office.LocAddressLine2}}</span><span ng-if="office.LocCity">, {{office.LocCity}}</span><span ng-if="office.LocCountryDescription">, {{office.LocCountryDescription}}</span><span ng-if="office.LocZipPostalCode">, {{office.LocZipPostalCode}}</span></p>
<!-- Creates the favourite icon on each list item, when the star is clicked the togglefav function is run -->
<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
</ion-item>
</ion-list>
<ion-list id="cont">
<!-- Last view offices list -->
<div ng-if="!query[queryBy]">
<h3 class="title" id="text">Last Viewed</h3>
<!-- the filter with this collection repeat runs the function ifinfav2 which only displays items in the localstorage -->
<ion-item id="fav" class="item-text-wrap item-icon-right" ng-repeat="office in offices|filter:ifinfav2" ng-controller="ModalCtrl" ng-click="openModal(office.Lat, office.Long);">
<h3>{{office.LocationName}}</h3>
<p id="details"><span ng-if="office.LocAddressLine1">{{office.LocAddressLine1}}</span><span ng-if="office.LocAddressLine2">, {{office.LocAddressLine2}}</span><span ng-if="office.LocCity">, {{office.LocCity}}</span><span ng-if="office.LocCountryDescription">, {{office.LocCountryDescription}}</span><span ng-if="office.LocZipPostalCode">, {{office.LocZipPostalCode}}</span></p>
<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
This is the query that i am using. Its not in a function, just in the controller.
$scope.query = {}
$scope.queryBy = '$'
I have three cases:
1.- If I use item-remove-animate (it animates the delete action) and ui-sref (it makes the item clickable to send the user to another view), when I delete an item, it gets deleted but also, the ui-sref redirect is triggered.
2.- If I remove the animation class 'item-remove-animate", it works as I expect, the item is deleted and I'm still on the same view. The problem is that the items are deleted instantly, I would like to conserve the animation.
3.- If I remove the ui-sref, the animation works as expected but I lose the redirect.
Here it is the complete view I'm using, in the first case:
HTML:
<ion-view title="Bimbo Keepers">
<ion-nav-buttons side="left"><a ng-click="onShowDeleteIcons()" ng-if="reportes.length" class="button button-icon icon ion-minus-circled"></a></ion-nav-buttons>
<ion-content padding="true" class="has-bottom-icons">
<div class="row">
<h1>Enviados</h1>
</div>
<ion-list show-delete="data.showDelete">
<ion-item ng-repeat="reporte in reportes.slice().reverse()" type="item-text-wrap" ui-sref="tab.detail-enviados({id: reporte.id})" class="item-thumbnail-left item-icon-right item-remove-animate item item-complex item-left-editable item-right-editable">
<ion-delete-button ng-click="onReporteDelete(reporte)" class="ion-minus-circled"></ion-delete-button>
<img ng-src="{{ reporte.imagen1_base64 }}"/>
<h2>Reporte No: {{reporte.id}}</h2>
<p>Envíado el {{reporte.fecha}}</p><i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
<div ng-if="!reportes.length" class="container">
<p>No has enviado reportes. Desde la pantalla de Reportes Guardados, utiliza el botón sincronizar.</p>
</div>
</ion-content>
</ion-view>
Here it is a CodePen:
http://codepen.io/jdsampayo/pen/QbLggv
Any help will be appreciated to conserve the animation.
Use the $event object in onReporteDelete function and stop event bubbling by using stopPropagation.
Updated codepen
hope this helps.
Try using event.preventdefault() - that might fix your problem. However, if you can provide a jsbin link, it will be better to debug the problem.
Use the event.preventDefault() in the ondelete function that you have.