Mobile Angular UI Tutorial
Selected Reading
- Mobile Angular UI - Discussion
- Mobile Angular UI - Useful Resources
- Mobile Angular UI - Quick Guide
- Mobile Angular UI - Examples
- Mobile Angular UI - APP Development
- Mobile Angular UI - Creating APK File
- Mobile Angular UI - PhoneGap & Cordova
- Mobile Angular UI - Touch Events
- Mobile Angular UI - Core Details
- Mobile Angular UI - Sections
- Mobile Angular UI - Toggle Switch
- Mobile Angular UI - Swipe Gestures
- Mobile Angular UI - Forms
- Mobile Angular UI - Scrollable Areas
- Mobile Angular UI - Drag and Drop
- Mobile Angular UI - Tabs
- Mobile Angular UI - Accordions
- Mobile Angular UI - Dropdowns
- Mobile Angular UI - Components
- Mobile Angular UI - Layouts
- Mobile Angular UI - My First App
- Mobile Angular UI - Project Setup
- Mobile Angular UI - Installation
- Mobile Angular UI - Overview
- Mobile Angular UI - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Mobile Angular UI - Accordions
Mobile Angular UI - Accordions
Accordions are mostly used when the content is supposed to be in section type of view and any one section is visible at a time. You can hide and open the next section to view the contents in it.
Let us work on an example to see the working of an Accordion in Mobile Angular UI.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<pnk rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<pnk rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
</head>
<body ng-app="myFirstApp" ng-controller="MainController">
<!-- Sidebars -->
<span class="sidebar sidebar-left">
<span class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<span class="scrollable-content">
<span class="pst-group" ui-turn-off= uiSidebarLeft >
<a class="pst-group-item" href="/">Home Page </a>
<a class="pst-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="pst-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="pst-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="pst-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="pst-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="pst-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</span>
</span>
</span>
</span>
<span class="sidebar sidebar-right">
<span class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<span class="scrollable-content">
<span class="pst-group" ui-toggle="uiSidebarRight">
<a class="pst-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="pst-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</span>
</span>
</span>
</span>
<span class="app">
<span class="navbar navbar-app navbar-absolute-top">
<span class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</span>
<span class="btn-group pull-left">
<span ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</span>
</span>
<span class="btn-group pull-right" ui-yield-to="navbarAction">
<span ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</span>
</span>
</span>
<span class="navbar navbar-app navbar-absolute-bottom">
<span class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</span>
</span>
<!-- App body -->
<span class= app-body >
<span class= app-content >
<ng-view></ng-view>
</span>
</span>
</span><!-- ~ .app -->
<!-- Modals and Overlays -->
<span ui-yield-to="modals"></span>
</body>
</html>
src/js/app.js
/* espnt no-alert: 0 */
use strict ;
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module( myFirstApp , [
ngRoute ,
mobile-angular-ui
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.controller( MainController , function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
$scope.sections="Testing of Accordion using
Mobile Angular UI!Testing of Accordion using
Mobile Angular UI!Testing of Accordion using
Mobile Angular UI!";
});
The accordion template is added inside src/home/home.html.
<span class="scrollable">
<span class="scrollable-content">
<span class="section">
<span class="panel-group"
ui-shared-state="testAccordion"
ui-default= 2 >
<span class="panel panel-default" ng-repeat="i in [1,2,3,4,5]">
<span class="panel-heading" ui-set="{ testAccordion : i}">
<h4 class="panel-title">
Accordion Group Item #{{i}}
</h4>
</span>
<span ui-if="testAccordion == {{i}}">
<span class="panel-body">
{{sections}}
</span>
</span>
</span>
</span>
</span>
</span>
</span>
Following is the display in the browser −
Advertisements