how to join two table in codeigniter easily[updated] | ci_model | ci_controller | codeigniter 3 -datainflow
Create drop down list in ionic:
Drop down list Ionic: how to create a drop down list using ionic platform. Create a drop down menu in your project, which you made by ionic platform.
You know that drop down list is a toggle able menus in menu bar that are allows the user to choose a menu or button, which has in a drop down list. The drops down lists are similar feature in a menu bar or toggle able.
In this tutorial I will show you to create a drop down list using CSS and JS in ionic page. I will provide the source code in the below of this tutorial. Follow the example:
In home.html:
<ion-view view-title="Drop-Down Button"> <ion-content class="padding"> <ion-list> <ion-item class="btn-style" ng-click="toggleGroup('g1')" ng-class="{active: isGroupShown(group)}"> <div class="home-btn-style"> <i class="icon " ng-class="isGroupShown('g1') ? 'ion-ios-arrow-down font-right' : 'ion-ios-arrow-forward font-right'"></i> <font class="btn-text-style">1. Button1</font> </div> </ion-item> <ion-item class="item-accordion" ng-show="isGroupShown('g1')" ng-click="your_action_area()"> test1 </ion-item> <ion-item class="item-accordion" ng-show="isGroupShown('g1')" ng-click="your_action_area()"> test2 </ion-item> <ion-item class="item-accordion" ng-show="isGroupShown('g1')" ng-click="your_action_area()"> test3 </ion-item> </ion-list> <ion-list> <ion-item class="btn-style" ng-click="toggleGroup('g2')" ng-class="{active: isGroupShown(group)}"> <div class="home_btn_style"> <i class="icon " ng-class="isGroupShown('g2') ? 'ion-ios-arrow-down font_right' : 'ion-ios-arrow-forward font-right'"></i> <font class="btn-text-style">2. Button2</font> </div> </ion-item> <ion-item class="item-accordion" ng-show="isGroupShown('g2')" ng-click="your_action_area()"> test1 </ion-item> <ion-item class="item-accordion" ng-show="isGroupShown('g2')" ng-click="your_action_area()"> test2 </ion-item> <ion-item class="item-accordion" ng-show="isGroupShown('g2')" ng-click="your_action_area()"> test3 </ion-item> </ion-list> </ion-content> </ion-view>
In style.css:
.home-btn-style{ height: 50px; width: 95%; border:none; background-color: RGBA(48, 88, 95, 0.8); float: right; padding: 8px; } .btn-text-style{ text-align: left; color: black; font-size: 20px; } .font-right{ color:#87ffee; font-size: 20px; float: right; } .btn-style{ padding: 0px; margin-top: 10px; background-color: rgba(8, 248, 214, 0.52)!important; border-radius: 2px; border:1px solid rgba(53, 153, 138, 0.5); border-right:none; }
In Controler.js:
angular.module('starter.controllers', []) .controller('DashCtrl', function($state,$scope) { $scope.toggleGroup = function(group) { if ($scope.isGroupShown(group)) { $scope.shownGroup = null; } else { $scope.shownGroup = group; } }; $scope.isGroupShown = function(group) { return $scope.shownGroup === group; }; })
Related posts