Sunday, 29 January 2017

Accordion in ionic

No comments
HTML

  <div ng-repeat="(key, value) in FriendsDetail| groupBy: 'UserDivision'">
                <ion-item class="item-stable"   ng-click="toggleGroup(key)"
                    ng-class="{active: isGroupShown(key)}">
                    <i class="icon" ng-class="isGroupShown(key) ? 'ion-minus' : 'ion-plus'"></i>
                    &nbsp;
                    <span style="margin:5px;color: #7fa42d;font-weight: bold;">{{key=='2'?'Common Programs and Services ':key=='3'?'Common Friends ':key=='4'?'Common Health Interests ':''}}</span>
                </ion-item>

                <ion-item class="item-accordion"
                          ng-repeat="friend in value" ng-if="friend.Names" ng-show="isGroupShown(key)">
                    {{friend.Names}}
                </ion-item>

            </div>



Controller


        $scope.toggleGroup = function (group) {
            if ($scope.isGroupShown(group)) {
                $scope.shownGroup = null;
            } else {
                $scope.shownGroup = group;
            }
        };
        $scope.isGroupShown = function (group) {
            return $scope.shownGroup === group;

        };