CODEWITHSUNDEEP
angularjsionic-frameworkaccordion
Suthan M
Suthan M

Reputation: 443

ionic expand and collapse with button tap

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.

Expand & Collapse

<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 ?

Upvotes: 1

Views: 5686

Answers (1)

Alex Ryltsov
Alex Ryltsov

Reputation: 3013

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

Upvotes: 0

Related Questions